Элементы с равной шириной гибки даже после их обертывания

Можно ли сделать такое чистое решение CSS следующим образом:

  • Элементы имеют несколько min-width.
  • Они должны динамически расти, чтобы заполнить всю ширину контейнера, а затем переносить на новые строки.
  • Все элементы в списке должны иметь равную ширину.

Вот как это выглядит сейчас:

введите описание изображения здесь

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

введите описание изображения здесь

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

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Ответы

Ответ 1

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

Здесь больше информации и различных решений, которые люди использовали для решения этой проблемы:

Однако выравнивание последней строки не является проблемой с другой технологией CSS3, Макет сетки. На самом деле, это очень просто с этим методом (и не требует никаких изменений в HTML):

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Ответ 2

Правильно нет, нет чистого решения CSS. Flexbox всегда пытается заполнить всю ширину контейнера с помощью готовых изделий. Таким образом, вам нужно будет вставить некоторые скрытые элементы, которые заполнят пустое пространство, будучи невидимым для пользователя.

Попробуйте следующее:

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

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}

.item-hidden {
  min-width: 100px;
  flex-grow: 1;
  border: 1px solid transparent;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
</div>