Как сделать элементы flexbox одинакового размера?

Ответ 1

Установите их так, чтобы их flex-basis было 0 (чтобы все элементы имели одинаковую отправную точку), и дайте им возможность расти:

flex: 1 1 0px

Ваша IDE или линтер могут упомянуть об этом the unit of measure 'px' is redundant. Если вы пропустите это (например: flex: 1 1 0), IE не будет правильно отображать это. Поэтому px требуется для поддержки Internet Explorer, как упоминалось в комментариях @fabb;

Ответ 2

Вы можете добавить flex-basis: 100% для достижения этой цели.

Обновленный пример

.header {
  display: flex;
}

.item {
  flex-basis: 100%;
  text-align: center;
  border: 1px solid black;
}

Для чего бы это ни стоило, вы также можете использовать flex: 1 для тех же результатов.

Сокращение flex: 1 такое же, как flex: 1 1 0, что эквивалентно:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}

Ответ 3

Вам нужно добавить width: 0 чтобы сделать столбцы равными, если содержимое элементов увеличивает их.

.item {
  flex: 1 1 0;
  width: 0;
}

Вот ссылка, которая помогла мне решить мою проблему: Всегда равные столбцы flexbox

Ответ 4

Принятый ответ адама (flex: 1 1 0) идеально подходит для контейнеров flexbox, ширина которых либо фиксирована, либо определена предком. Ситуации, когда вы хотите, чтобы дети помещались в контейнер.

Однако может возникнуть ситуация, когда вы захотите, чтобы контейнер соответствовал дочерним элементам, при этом размер дочерних элементов будет одинаковым по размеру в зависимости от наибольшего дочернего элемента. Контейнер flexbox можно подогнать под его дочерние элементы:

• настройка position: absolute и не настройка width или right, или
• поместите его в обертку с display: inline-block

Для таких контейнеров flexbox принятый ответ НЕ работает, дочерние элементы имеют одинаковый размер. Я предполагаю, что это ограничение flexbox, так как он ведет себя одинаково в Chrome, Firefox и Safari.

Решение состоит в том, чтобы использовать сетку вместо flexbox.

Демо: https://codepen.io/brettdonald/pen/oRpORG

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let try a grid instead. Aha! That what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}