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

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

Например:

.header {
  display: flex;
}

.item {
  flex-grow: 1;
  text-align: center;
  border: 1px solid black;
}
<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

Первый предмет намного больше, чем второй. Если у меня есть 3 предмета, 4 предмета или n предметов, я хочу, чтобы они отображались на одной строке с одинаковым количеством места на предмет.

Есть идеи?

http://codepen.io/anon/pen/gbJBqM

12 ответов

Решение

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

flex: 1 1 0

Добавление ширины: 0 помогло мне решить проблему

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

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

Вы могли бы добавить 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;
}

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

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

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

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

Решение - использовать сетку вместо гибкого бокса.

Демо: 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's try a grid instead. Aha! That's 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;
}

Я не эксперт в гибкости, но я достиг этого, установив основу на 50% для двух пунктов, с которыми я имел дело. Вырасти до 1 и уменьшись до 0.

Встроенный стиль: flex: '1 0 50%',

Ни одно из этих решений у меня не сработало, поэтому я решил поделиться тем, что сработало.

      .header {
    display: flex;
}

.header .item {
    width: 100%;
}

Демо CodePen

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

Решение для меня было просто поставить overflow: hidden; на flex-grow: 1; клетки.

на дочернем элементе flex

      flex: 1 1 25%

это позволит иметь 4 элемента, если вы хотите добавить больше элементов, вы можете уменьшить%

Надежно и равномерно распределить столбцы с помощью flexbox может быть очень сложно по сложным причинам, связанным с заполнением, границей и полями, которые подробно объясняются в этой статье .

Одна из альтернатив предлагает вместо этого использовать сетку со следующими стилями:

      .grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

Это будет работать, даже если вы оборачиваете элементы , например Grid , но не так просто, вы должны показать, куда он будет перенесен в медиа-запросах))

пример:

      .flex-item{
     flex: 0 0 calc(25% - (45px / 4 ))
}

работает так:

      $n: 4; // number of columns
$gap: 15px; // margin pixels

.flex-parent{
    display: flex;
    gap: $gap;
}
.flex-item{
     flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n ) );
}

У меня была аналогичная проблема, и я нашел способ обмануть.

Как говорили другие,иэто способ сохранить элементы одинакового размера, но последняя строка является исключением, когда элементов слишком мало (они заполняют все доступное пространство, делая их больше, чем другие элементы). Чтобы этого не происходило, я добавил пустой разделитель си установите встроенное значение на основе быстрого подсчета количества элементов.

Это проще, если вы знаете ширину родительского контейнера, но даже если вы этого не знаете, вы можете установитьзначение на разделителе с помощью медиа-запросов и точек останова.

      .container{
display:flex;
flex-wrap:wrap;
}

.item{
flex basis:(add required width px)
}

Если последняя строка имеет только один элемент и он занимает всю ширину, удалите «flex-grow» из гибкого элемента и попробуйте добавить только «flex-basis:(req px)» или «flex-shrink:1». Это сработало для меня!

Другие вопросы по тегам