Подтвердить что ты не робот

Центрирование определенного элемента среди других с помощью flexbox

У меня есть макет с тремя элементами в 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, а остальные элементы останутся с обеих сторон, например, это изображение:

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

Ответ 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>