Как правильно выровнять эти элементы с помощью flexbox?

Question

Извините за очень расплывчатым названием вопроса, но я понятия не имею, как лучше описать это ...

Рассмотрим следующий пример кода:

.wrapper { 
 
    border: 2px solid green; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: center; 
 
    
 
    border: 2px solid red; 
 
    margin: 5px; 
 
    height: 64px; 
 
} 
 

 
.item { 
 
    display: flex; 
 

 
    border: 2px solid #0000ff; 
 
    padding: 3px; 
 
} 
 

 
.left { 
 
    justify-content: flex-end; 
 
} 
 

 
.right { 
 
    justify-content: flex-start; 
 
}

<div class="wrapper" style="width: 100%"> 
 
    <div class="container"> 
 
    <div class="item left">FIXED</div> 
 
    <div class="item right">abc</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="item">FIXED</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="item left">FIXED</div> 
 
    <div class="item right">abcdefgh</div> 
 
    </div> 
 
</div> 
 
<br /> 
 
<div class="wrapper" style="width: 50%"> 
 
    <div class="container"> 
 
    <div class="item left">FIXED</div> 
 
    <div class="item right">abc</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="item">FIXED</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="item left">FIXED</div> 
 
    <div class="item right">abcdefgh</div> 
 
    </div> 
 
</div>

Наблюдения:

• FIXED представляет собой n элемент фиксированного размера, всегда такой же ширина/высота.
• Правый элемент может отличаться по размеру (в основном ширина).
• Правый элемент стороны всегда выровненный слева.
• Элемент левой стороны: всегда выровнен слева.

То, что я пытаюсь достичь:

• FIXED элемент всегда должен быть в центре на красной строке.
• Элемент FIXED на первой и третьей строках должен быть выровнен с правой стороны элемента FIXED во второй строке.

Вот изображение, чтобы лучше продемонстрировать то, что я ищу:

EDIT: Мое окончательное решение, основанное на @vals ответ. Мне пришлось немного изменить это, потому что я использую CSS-модули с селекторной композицией в приложении React, и мне нужен один класс для каждого элемента.

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: center; 
 
    
 
    /* UNREQUIRED (FOR DEMONSTRATION ONLY) */ 
 
    border: 2px solid red; 
 
    padding: 5px; 
 
} 
 

 
.container::before { 
 
    content: ""; 
 
    flex: 1 0 14px; /* UNREQUIRED (FOR DEMONSTRATION ONLY) (14px -> 0) */ 
 
} 
 

 
.container-single { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: center; 
 
    
 
    /* UNREQUIRED (FOR DEMONSTRATION ONLY) */ 
 
    border: 2px solid red; 
 
    padding: 5px; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    flex: 0 0 auto; 
 
    
 
    /* UNREQUIRED (FOR DEMONSTRATION ONLY) */ 
 
    border: 2px solid #0000ff; 
 
    padding: 5px; 
 
} 
 

 
.item-right { 
 
    display: flex; 
 
    flex: 1 0 0; 
 
    
 
    /* UNREQUIRED (FOR DEMONSTRATION ONLY) */ 
 
    border: 2px solid #0000ff; 
 
    padding: 5px; 
 
} 
 

 
.item-left { 
 
    display: flex; 
 
    flex: 0 0 auto; 
 
    margin-left: auto; 
 
    
 
    /* UNREQUIRED (FOR DEMONSTRATION ONLY) */ 
 
    border: 2px solid #0000ff; 
 
    padding: 5px; 
 
}

<div class="container"> 
 
    <div class="item-left">FIXED</div> 
 
    <div class="item-right">abc</div> 
 
</div> 
 
<br /> 
 
<div class="container-single"> 
 
    <div class="item">FIXED</div> 
 
</div> 
 
<br /> 
 
<div class="container"> 
 
    <div class="item-left">FIXED</div> 
 
    <div class="item-right">abcdefgh</div> 
 
</div>

Для тех, кто заинтересован, композиция селектор CSS выглядит следующим образом:

.container { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
} 

.container::before { 
    flex: 1 0 0; 
    content: ""; 
} 

.container-single { 
    composes: container; 
} 

.item { 
    display: flex; 
    flex: 0 0 auto; 
} 

.item-right { 
    flex: 1 0 0; 

    composes: item; 
} 

.item-left { 
    margin-left: auto; 

    composes: item; 
} 

Answer 1

Я изменил расположение slighty, я добавить класс на одном контейнере ,

Это нормально для правильного элемента для роста?

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    border: 2px solid red; 
 
    padding: 5px; 
 
} 
 
.item { 
 
    display: flex; 
 
    flex-basis: auto; 
 
    flex-grow: 0; 
 
    border: 2px solid #0000ff; 
 
    padding: 5px; 
 
} 
 
.item.right { 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
} 
 
.item.left { 
 
    margin-left: auto; 
 
} 
 
.container:not(.single):before { 
 
    content: ""; 
 
    flex-basis: 14px; /* border 2px + padding 5px */ 
 
    flex-grow: 1; 
 
} 
 
.single .item { 
 
    margin: 0px auto; 
 
}

<div class="container"> 
 
    <div class="item left">FIXED</div> 
 
    <div class="item right">abc</div> 
 
</div> 
 
<br /> 
 
<div class="container single"> 
 
    <div class="item">FIXED</div> 
 
</div> 
 
<br /> 
 
<div class="container"> 
 
    <div class="item left">FIXED</div> 
 
    <div class="item right">abcdefgh</div> 
 
</div>