Одинаковые отступы со всех сторон. Flexbox layout

488

28 ноября 2016, 18:29

Есть гибкий блок с тремя вложенными блоками.

div{ 
  height: 20px; 
} 
.container{ 
  display: flex; 
  justify-content: space-around; 
  background: gray; 
} 
.d1 {background: red;} 
.d2 {background: green;} 
.d3 {background: blue;}

<div class="container"> 
  <div class="d1">Текст</div> 
  <div class="d2">Длинный длинный длинный длинный текст</div> 
  <div class="d3">Длинный текст</div> 
</div>

Как сделать равные отступы со всех сторон? Все серые куски должны быть одинаковой длины, и не зависеть от длины вложенных блоков.
Этот простой вопрос поставил меня в тупик.

Answer 1

Склоняюсь к тому, что это костыль, но ничего лучше что-то не придумывается.

Убираем отступы по краям (space-between вместо space-around) и вставляем ещё 2 псевдоэлемента, чтобы получить полный отступ около них, а не половинный по краям:

div { 
  height: 20px; 
} 
 
.container { 
  display: flex; 
  justify-content: space-between; 
  background: gray; 
} 
 
.container:before, .container:after { 
  content: ""; 
} 
 
.d1 { background: red;   } 
.d2 { background: green; } 
.d3 { background: blue;  }

<div class="container"> 
  <div class="d1">Текст</div> 
  <div class="d2">Длинный длинный длинный длинный текст</div> 
  <div class="d3">Длинный текст</div> 
</div>