Центрирование конкретный элемент среди других с Flexbox

Question

У меня есть макет с тремя элементами в Flexbox так:

.flex-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 

<div class="flex-container"> 
    <div class="flex-item"> computed width of 50px </div> 
    <div class="flex-item plz-center"> computed width of 25px </div> 
    <div class="flex-item"> computed width of 150px </div> 
</div> 

Я хотел бы, чтобы центрировать средний элемент plz-center и иметь другие элементы остаются на обе стороны, как это изображение:

Они прекрасно работают в гибком строке, но если ширина конечных элементов различны, средний элемент не оставаться в центре. Мне лучше сделать plz-center?

Answer 1

Простое решение этой проблемы было бы дать свой первый ящик margin-right:auto и ваш последний ящик margin-left:auto, гибкий коробка разберется остальное и рассчитать расстояние для вас.

Более сложное решение, которое часто используется сайтами при создании систем сетки, было бы обернуть каждый из этих гибких элементов в другой DIV, который также является гибкой коробкой. Затем сделайте эти новые гибкие коробки одинаково распределенными по ширине гибкой коробки для обертывания (1/3 ширины). Затем внутри каждого из этих ящиков вы можете поместить свои элементы по своему усмотрению. Вот пример (я оставил черные границы вокруг нового оборачивания Flex-коробки, чтобы вы могли лучше видеть, как это ведет себя):

body { 
 
    margin: 0; 
 
} 
 
.flex-container { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.flex1, 
 
.flex2, 
 
.flex3 { 
 
    display: flex; 
 
    flex: 1 1 0; 
 
    border: 1px solid black; 
 
} 
 
.flex2 { 
 
    justify-content: space-around; 
 
} 
 
.flex3 { 
 
    justify-content: flex-end; 
 
} 
 
.flex-item { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: orange; 
 
} 
 
.flex-item.plz-center { 
 
    width: 25px; 
 
} 
 
.flex-item.big { 
 
    width: 150px; 
 
}

<div class="flex-container"> 
 
    <div class="flex1"> 
 
    <div class="flex-item"></div> 
 
    </div> 
 
    <div class="flex2"> 
 
    <div class="flex-item plz-center"></div> 
 
    </div> 
 
    <div class="flex3"> 
 
    <div class="flex-item big"></div> 
 
    </div> 
 
</div>