CSS. Все дочерние элементы flexbox имеют одинаковый размер.

Ответ 1

У вас есть два способа сделать это:

flex-grow: 0 (fiddle)

Если вы установили flex-grow в 0, вы говорите, что элементы сохраняют свою ширину и расширяют пустое пространство. Используя flex-grow: 1, элементы будут расширять ширину, чтобы она соответствовала пробелу.

невидимые элементы (fiddle)

Добавьте некоторые невидимые элементы после обычных элементов с теми же свойствами гибкости. Вы получите выравнивание влево.

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

Ответ 2

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

Первое решение с flex-grow: 0; не растягивает элементы для заполнения контейнеров. Второе решение с невидимыми элементами работает, но увеличивает высоту контейнера. Хотя удаление верхнего/нижнего полей сделало свое дело.

Я отредактировал jsfiddle, чтобы он одновременно реагировал и исправлял невидимые элементы, расширяющие контейнер, используя комментарии, чтобы объяснить, что я изменил. Тем не менее, он не работает, если контейнер больше, чем строка элементов: (fiddle)

Я также сделал свое собственное простое решение. Я пытался сделать это сам, и Игорь Раскрытие очень помогло. (скрипку)

.container {
  display: flex;
  flex-flow: row wrap;
  
  /*style*/
  padding: 0.5em;
  background-color: royalblue;
}
.item {
  flex: 1 0 80px;
  
  /*style*/
  margin: 0.5em;
  padding: 1em;
  text-align: center;
  background-color: lightblue;
}
.filler {
  flex: 1 0 80px;
  height: 0px;
  
  /*style*/
  margin: 0 0.5em;
  padding: 0 1em;
}

<div class="container">
  <div class="item">sm</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">medium</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">sm</div>
  <div class="item">sm</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">medium</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">sm</div>

  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
</div>

Ответ 3

Вы можете заставить элементы перестать расширяться с помощью max-width на элементах (fiddle). Чтобы получить их влево-выровнять, используйте другую justify-content на обертке (fiddle).

Надеюсь, это сработает! Смотрели только в Chrome.

Ответ 4

вы можете попробовать установить flex-basis: 50%; и flex-grow: 1.

.parent {
  display: flex;
  width: 300px;
  height: 300px;
}

.child {
   flex-basis: 50%;
   flex-grow: 1;
   background: tomato;
   border: 1px solid #ccc;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
<div>

Ответ 5

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

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

.container
   @include display-flex
   @include flex-wrap(wrap)
   .item
       @include flex-grow(1)
       @include flex-basis(190px)
       @include max-width(190px)

Ответ 6

Для этого типа проблем я просто использую float.

.container {
  overflow: hidden;
}

.child-item {
  float: left;
}