Перенос элементов в Flexbox

По умолчанию flex-элементы стараются разместиться в одной линии. Но что произойдет, если для всех элементов не хватит места?

Flexbox позволяет определить, должны ли элементы оставаться в одной линии или переноситься на следующую.

За это отвечает свойство flex-wrap.

Flex-wrap

Свойство flex-wrap определяет, могут ли flex-элементы переноситься на следующую линию.

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

У свойства есть три значения:

• nowrap;
• wrap;
• wrap-reverse.

Значение по умолчанию — nowrap.

nowrap

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

nowrap означает, что элементы не переносятся на новую flex-линию. Если места недостаточно, они остаются в одной линии, а дальнейшее поведение зависит от размеров элементов и других свойств Flexbox.

wrap

Чтобы разрешить перенос, используется:

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

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

wrap-reverse

Третье значение flex-wrap:

flex-wrap: wrap-reverse;

Оно также разрешает перенос, но меняет направление поперечной оси.

Например:

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

Элементы по-прежнему будут переноситься, но новые flex-линии будут формироваться в противоположном направлении.

При стандартном row новые flex-линии при wrap формируются по направлению поперечной оси, а при wrap-reverse — в противоположном направлении.

Перенос и главная ось

Перенос связан с направлением главной оси. При стандартном flex-direction: row главная ось горизонтальная, поэтому элементы сначала заполняют строку, а затем переходят на следующую.

Если же использовать:

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

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

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

Это важный момент:

Несколько flex-линий

Когда используется flex-wrap: wrap, у контейнера может появиться несколько flex-линий. Например, часть элементов находится в первой строке, а остальные — во второй. Это немного меняет модель, которую нужно держать в голове.

Теперь у нас есть:

• отдельные flex-элементы;
• flex-линии, в которых эти элементы находятся.

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

Именно здесь появляется align-content.

Свойство align-content управляет распределением нескольких flex-линий вдоль поперечной оси.

Например:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Если элементы образовали несколько линий, align-content может разместить эти линии по центру контейнера вдоль поперечной оси.

Здесь важно не перепутать align-content с align-items.

align-items отвечает за положение элементов внутри flex-линии.

align-content отвечает за положение самих flex-линий внутри контейнера.

align-content имеет смысл только тогда, когда:

1. у контейнера есть несколько flex-линий;
2. вдоль поперечной оси есть свободное пространство.

Gap при переносе

Свойство gap особенно удобно использовать вместе с flex-wrap.

Например:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

Теперь между flex-элементами будет одинаковый промежуток как внутри одной линии, так и между соседними линиями.

Если нужно отдельно управлять расстоянием между строками и колонками, можно использовать:

.container {
  column-gap: 20px;
  row-gap: 30px;
}

Здесь:

• column-gap задает расстояние между колонками;
• row-gap задает расстояние между строками.

Flex-flow

Если одновременно нужно задать направление главной оси и перенос, существует сокращенная запись flex-flow.

Вместо:

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

можно написать:

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

flex-flow объединяет:

• flex-direction;
• flex-wrap.

Что нужно запомнить

1. По умолчанию flex-элементы не переносятся:

flex-wrap: nowrap;

2. Чтобы разрешить перенос, используется:

flex-wrap: wrap;

3. align-content работает с несколькими flex-линиями внутри контейнера.

4. align-content требует нескольких линий и свободного пространства по поперечной оси.

5. gap удобно использовать вместе с flex-wrap, чтобы задавать одинаковые промежутки между элементами и линиями.

6. flex-flow позволяет одновременно задать flex-direction и flex-wrap.