Ответ 1
Простым решением для этой проблемы было бы предоставить ваш первый ящик margin-right:auto
и ваш последний ящик margin-left:auto
, Flex-box будет сортировать остальные и рассчитать интервал для вас.
Более сложное решение, которое часто используется веб-сайтами при создании сетевых систем, должно было бы обернуть каждый из этих гибких элементов в другой DIV, который также является гибкой коробкой. Затем сделайте эти новые гибкие коробки одинаково распределенными по ширине гибкой коробки для обертывания (1/3 ширины). Затем внутри каждого из этих ящиков вы можете поместить свои элементы по своему усмотрению. Вот пример (я оставил черные границы вокруг новых упаковочных гибких ящиков, чтобы вы могли лучше видеть, как это ведет себя):
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>