Flex: 3 элемента 1 по центру остальные по краям

146

21 января 2021, 05:20

Пытаюсь сделать верстку на флексах, есть три контейнера разной ширины. Два должны быть по краям и один по центру.

Пока-что поулчается только сделать крайние контейнеры фиксированной ширины и поставить justify-contnent: space-between; но этот вариант не подходит т.к. для адаптивной верстки центральный блок пропадает и уже надо менять эти значения ширины краев чтобы хватало место на содержимое.

Answer 1

Я нашёл способ для разных элементов. Надеюсь, это Вам поможет:

.box { 
  height: 150px; 
  width: 100%; 
  position: relative; 
  display: flex; 
  background-color: #000000; 
} 
 
.block { 
  background-color: red; 
} 
 
.first { 
  width: 25px; 
} 
 
.mid { 
  width: 75px; 
  height: 100%; 
  position: absolute; 
  left: 50%; 
  transform: translate(-50%, 0); 
} 
 
.last { 
  width: 150px; 
  margin-left: auto; 
}

<div class="box"> 
  <div class="block first"></div> 
  <div class="block mid"></div> 
  <div class="block last"></div> 
</div>

Answer 2

Можно сделать обычный флекс из пяти блоков. А между 3-мя основными, сделать 2 пустых, которые будут обеспечивать только ширину.

JsFiddle (там можно растягивать окно - смотреть)

.mama { 
  display: flex; 
  background-color: #fff200; 
} 
 
.block { 
  height: 200px; 
  background-color: #880015; 
  width: 20%; 
  min-width: 100px; 
} 
.center { 
  width: 40%;   
  min-width: 200px; 
} 
.mid { 
  width: 10%; 
  min-width: 0; 
}

<div class="mama"> 
  <div class="block"></div> 
  <div class="mid"></div> 
  <div class="block center"></div>   
  <div class="mid"></div> 
  <div class="block"></div> 
</div>

Answer 3

Вам может помочь свойство justify-content. Значение space-between первый и последний элементы прижмёт к краям, а оставшиеся равномерно распределит.

.block {
    display: flex;
    justify-content: space-between;
}

UPD:
Способ только для элементов одинаковой ширины.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Дублирование последнего числа в ListBox

Мне нужно считать все числа из файла в бинарном режиме (мне принципиально важно именно в этом режиме считывать числа) и добавить в ListBoxПо непонятной...

121

c++