Повышение отзывчивости при помощи flex-wrap

Development | Amber | Комментировать запись

CSS-свойство flex-wrap — это быстрый способ сделать родительские элементы более отзывчивыми на экранах различных размеров. Как flexbox в целом, он упрощает макеты страниц, поэтому вам не нужно вручную устанавливать точки останова или самостоятельно управлять переполнением страницы.

Читайте также: Основы работы с CSS Flexbox

Flexbox и управление переносом элементов

flex-wrap — это специальное свойство модуля flexbox (или «flexible box») в CSS. Flexbox — это модель компоновки CSS, которая управляет тем, как дочерние элементы отображаются в родительских. Это означает, что flexbox можно использовать для оптимизации общего макета страницы (например, для колонтитулов, навигации и т.д.). Однако, что более важно, его можно применить к любому элементу на странице, имеющему дочерние элементы.

div.parent {
  display: flex;
}

Чтобы делать элемент контейнером flex, достаточно просто добавить display: flex; к объявлениям CSS.

Когда контейнер flex готов, вы можете объявить flex-wrap для того же родительского элемента, чтобы определить, как обрабатывать дочерние элементы, которые по умолчанию не помещаются в одну строку.

div.parent {
  display: flex;
  flex-wrap: wrap;
}

Примечание: Родительский элемент нужно превратить в контейнер flex до применения flex-wrap. Свойство flex-wrap применяется исключительно к контейнерам (не к дочерним элементам).

Стандартная настройка flex-wrap

По умолчанию flex-контейнер пытается уместить свои дочерние элементы в одну строку. Это называется nowrap для свойства flex-wrap.

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

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

Примечание: no-wrap – это стандартное свойство flex-wrap для flex-контейнеров. Это означает, что вам не нужно явно объявлять его, как мы сделали выше.

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

Как это можно исправить? С помощью flex-wrap!

Опции flex-wrap

Свойство flex-wrap принимает три значения:

• nowrap: это значение по умолчанию для всех flex-контейнеров, поэтому его не нужно явно объявлять, если только вы не переопределяете другие стили. Дочерние элементы всегда остаются в одной строке.
• wrap: это свойство позволит дочерним элементам переноситься на дополнительные строки, если они больше не помещаются в исходную строку. Элементы, которые не помещаются, будут перенесены в нижний левый угол родительского элемента.
• wrap-reverse: создает эффект, противоположный wrap. Вместо переноса переполняющих элементов в нижний левый угол он будет переносить их на новую строку над дочерними элементами в верхнем левом углу родителя.

Чтобы увидеть разницу между wrap и wrap-reverse, попробуем изменить размер окна:

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

В этом примере переполняющие элементы переходят на новую строку под дочерние элементы.

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

А во втором примере они уйдут вверх и будут расположены над первым дочерним элементом. wrap-reverse используется значительно реже, но иметь его в своем арсенале полезно.

Что такое flex-flow?

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

flex-flow — это свойство flexbox, которое заменяет flex-wrap и flex-direction.

Краткое введение в flex-direction

flex-direction определяет, как будут располагаться дочерние элементы – в строке или столбце. У вас есть четыре варианта: row, column, column-reverse и row-reverse. Значением по умолчанию для flex-direction является row.

Использование flex-flow

flex-flow сначала объявляет flex-direction родительского элемента, а затем значение flex-wrap. Его следует использовать только в том случае, если вам нужно явно объявить, что значения flex-direction и flex-wrap отличаются от значений по умолчанию.

То есть вы можете написать эти свойства следующим образом:

.backwards-flex-container {
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}

Получить тот же эффект можно через сокращение flex-flow:

.backwards-flex-container {
  flex-flow: row-reverse wrap-reverse;
}

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

Примечание: flex-flow — единственное сокращение flexbox, которое специально включает flex-wrap. В остальном же существует много других сокращений – большинство свойств flexbox имеют свои сокращения.

Поддержка браузерами

В целом, flexbox и flex-wrap очень хорошо поддерживаются во всех современных браузерах. Даже Internet Explorer (IE) предоставляет частичную поддержку flexbox и flex-wrap после IE9.

Префиксы Flexbox

Префиксы для flexbox и flex-wrap сегодня почти не используются. Применение префиксов теперь зависит от того, какие версии браузеров должны поддерживать ваше приложение.

.parent {
  display: flex;
  display: -webkit-flex; /* old versions of Chrome/Safari/Opera */
  display: -ms-flexbox; /* IE10 */

  flex-wrap: wrap;
  -webkit-flex-wrap: wrap; /* old versions of Chrome/Safari/Opera */
}

Примечание: Обратите внимание, что flex-wrap — это одно из свойств flexbox, которое не поддерживается некоторыми старыми версиями браузеров, типа Firefox.

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