Как flex-wrap работает с выравниванием, выравниванием и выравниванием содержимого?

Ответ 1

Короткий ответ

Хотя свойство flex-wrap выглядит довольно основательно - он контролирует, могут ли элементы гибкости обернуть - на самом деле он оказывает большое влияние на весь формат Flexbox.

Свойство flex-wrap определяет тип гибкого контейнера, который вы будете использовать.

• flex-wrap: nowrap создает гибкий контейнер single-
• flex-wrap: wrap и wrap-reverse создают многострочный гибкий контейнер

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

align-content работает только в многострочных контейнерах. Он игнорируется в контейнерах линии single-.

объяснение

Спецификация flexbox предоставляет четыре свойства ключевых слов для выравнивания элементов flex:

• align-items
• align-self
• align-content
• justify-content

Чтобы понять функции этих свойств, важно сначала понять структуру гибкого контейнера.

Часть 1: Понимание основной оси и поперечной оси контейнера Flex

Оси X и Y

Гибкий контейнер работает в двух направлениях: по оси х (по горизонтали) и по оси Y (по вертикали).

^{Источник: Википедия}

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

Это гибкое выравнивание на самом фундаментальном уровне.

Основные и крестовые топоры

Наложение осей x и y в гибком маке - основная и поперечная оси.

По умолчанию основная ось горизонтальна (ось х), а поперечная ось вертикальна (ось y). Это начальная настройка, определяемая спецификацией flexbox.

^{Источник: W3C}

Однако, в отличие от осей x и y, которые фиксированы, основная и поперечная оси могут переключать направления.

Свойство flex-direction

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

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

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

5.1. Направление потока Flex: свойство flex-direction

Свойство flex-direction определяет, как элементы гибкости помещаются в контейнер flex, задавая направление основной оси гибких контейнеров. Это определяет направление, в котором изложены гибкие элементы.

Существует четыре значения свойства flex-direction:

/* main axis is horizontal, cross axis is vertical */
flex-direction: row; /* default */
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

Перекрестная ось всегда перпендикулярна основной оси.

Часть 2: Линии Flex

Внутри контейнера гибкие элементы существуют в строке, известной как "гибкая линия".

Гибкая линия представляет собой строку или столбец, в зависимости от flex-direction.

Контейнер может иметь одну или несколько линий, в зависимости от flex-wrap.

single- Контейнер Flex Flex

flex-wrap: nowrap устанавливает контейнер гибкости линии single-, в котором элементы гибкости вынуждены оставаться в одной строке (даже если они переполняют контейнер).

На изображении выше есть одна гибкая линия.

flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap; /* <-- allows single-line flex container */
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  width: 50px;
  margin: 5px;
  background-color: lightgreen;
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

Ответ 2

Прежде всего, выравнивание содержимого бесполезно, если нет обертки:

w3c doc

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

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

flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}
flex-item:last-child {
  align-self: flex-end;
  background-color: crimson;
}
flex-item:nth-child(5) {
  height: 90px;  /* added */
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>