Удалите пространство (пробелы) между несколькими линиями элементов гибкости, когда они завертываются

Я пытаюсь иметь несколько элементов под друг другом в контейнере с установленной высотой. Затем элементы будут перемещаться рядом друг с другом, если не осталось места.

Это идея:

Я пытаюсь достичь этого, используя flexbox, контейнер с установленной высотой, направление установлено на column и flex-wrap равно wrap:

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

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

Я попробовал установить как justify-content, так и align-items на flex-start, но это, вероятно, значение по умолчанию.

Есть ли способ решить это?

Вот код:

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
}
.items {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: tomato;
  color: white;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}
<div class="container">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
</div>

Ответы

Ответ 1

Исходная настройка контейнера flex составляет align-content: stretch.

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

Чтобы отменить это поведение, примените align-content: flex-start к контейнеру.

Когда вы работаете в однострочном контейнере Flex (т.е. flex-wrap: nowrap), свойства, используемые для распределения пространства вдоль поперечной оси, это align-items и align-self.

Когда вы работаете в контейнере multi-line flex (т.е. flex-wrap: wrap) – как в вопросе – свойство, используемое для распределения гибких линий (строк/столбцов) вдоль поперечной оси, align-content.

Из спецификации:

8.3. Поперечное осевое выравнивание: свойства align-items и align-self

align-items устанавливает выравнивание по умолчанию для всех элементов контейнера flex, включая анонимные элементы гибкости. align-self разрешает переопределение по умолчанию для отдельных элементов гибкости.

8.4. Гибкие линии упаковки: align-contentСвойство

Свойство align-content выравнивает строки гибких контейнеров в пределах гибкий контейнер, когда имеется дополнительное пространство в поперечной оси, аналогично как justify-content выравнивает отдельные элементы в пределах основной оси. Обратите внимание: это свойство не влияет на однострочный контейнер flex.

Свойство align-content принимает шесть значений:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

Здесь определение для stretch:

stretch

Линии растягиваются, чтобы заняться оставшимся пространством. Если оставшееся свободное пространство отрицательное, это значение идентично flex-start. В противном случае свободное пространство распределяется поровну между всеми линиями, увеличивая их размер поперечного сечения.

Другими словами, align-content: stretch на поперечной оси аналогично flex: 1 на главной оси.