Webstacker

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

Flexbox — самый полный гайд или как сверстать сайт и не умереть

  • Вещает
  • Опубликовано:
  • Изменено:
Просто прикольная картинка

Дисклеймер

Добрый день. Или что там у вас. Сейчас речь пойдет о флексах, если ты верстаешь флоатами (или, не дай Б-г, таблицами) — покинь топик. Самое время пойти выпить безалкогольного пива и скушать фалафель.

Привет, Flex, наконец-то!

На улице 2018 год и поддержка Flex’ов уже идет полным ходом — 97.66% браузеров поддерживают их, за данными сайта caniuse.com! А это значит то, что жизнь верстальщика стала намного проще: браузер посетителя поумнел и создание сайта теперь проще, лучше и изысканнее.

Почему Flex?

  • Все блоки очень легко делаются адаптивными. Элементы могут растягиваться и сжиматься по заданным правилам, занимая нужное пространство.
  • Выравнивание по вертикали и горизонтали, базовой линии текста работает шикарно.
  • Расположение элементов можно поменять с помощью CSS, адаптивная верстка становится проще!
  • Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место в контейнере.
  • Flexbox адаптирован под написание справа-налево rtl (right-to-left), в отличие от привычного нам ltr (left-to-right). В нем есть понятие начала и конца. В браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.
  • Синтаксис CSS правил очень прост и осваивается довольно быстро.

Нужно что же, начнем?

Контейнер

Блок, который хранит в себе дочерные элементы, которые нужно позиционировать. Контейнер обрабатывает элементы внутри себя, без вложенности. Внуки (Дети детей контейнера) уже не будут похожи на бабушку-контейнер. Только дети. Запомни, это важно.

Его инициализация происходит следующим образом:

.container {
  display: flex; /* or inline-flex */
}

flex-direction

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

  • row (по умолчанию): слева направо в ltr; справа налево в rtl
  • row-reverse: справа налево в ltr; слева направо в rtl
  • column: то же, что и строка, но сверху вниз
  • column-reverse: тот же, что и в обратном порядке, но снизу вверх
Всё просто - вверх, вниз, вправо, влево
Всё просто — вверх, вниз, вправо, влево

flex-wrap

По умолчанию элементы flex будут стараться помещаться в одной строке. Вы можете изменить это и позволить элементам обернуть по мере необходимости с этим свойством.

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap (по умолчанию): все элементы flex будут находиться на одной строке.
  • wrap: гибкие элементы будут перенесены на несколько строк, сверху вниз.
  • wrap-reverse: элементы flex будут перенесены на несколько строк снизу вверх.
Перенос элементов - это ТАК просто!
Перенос элементов — это ТАК просто!

flex-flow

Это сокращенное свойство, которое определяет основную и поперечную оси контейнера. Применяется к контейнеру. Значение по умолчанию — row nowrap.

flex-flow: <'flex-direction'> || <'flex-wrap'>

justify-content

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

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  • flex-start (по умолчанию): элементы позиционируются вначале контейнера.
  • flex-end: элементы позиционируются в конце контейнера.
  • center: элементы центрируются вдоль контейнера.
  • space-between: элементы равномерно распределены по контейнеру; первый элемент находится вначале контейнера, последний — в конце.
  • space-around: элементы равномерно распределены по контейнеру с равным пространством вокруг них. Обратите внимание, что расстояния визуально не равны, поскольку все элементы имеют одинаковое пространство с обеих сторон.
  • space-evenly: элементы распределяются так, что расстояние между любыми двумя элементами (и пространство до краев) равно.
Выравнивание вдоль основной оси
Выравнивание вдоль основной оси

align-items

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

.container { 
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start: элементы выравниваются по верхнему краю контейнера.
  • flex-end: элементы выравниваются по нижнему краю контейнера.
  • center: элементы центрированы по вертикали.
  • baseline: элементы выравниваются по собственному базовому выравниванию.
  • stretch (по умолчанию): элементы растягиваются, чтобы заполнить контейнер.
Вертикальное выравнивание - не проблема!
Вертикальное выравнивание — не проблема!

align-content

Это свойство выравнивает контейнер внутри, когда имеется дополнительное пространство, подобно тому, как justify-content выравнивает отдельные элементы на основной оси.

Примечание. Это свойство не действует, когда имеется только одна строка элементов flex.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start: элементы выравниваются по верхнему краю контейнера.
  • flex-end: элементы выравниваются по нижнему краю контейнера.
  • center: элементы выравниваются по центру контейнера.
  • space-between: элементы позиционируются равномерно, первая строка находится в начале контейнера, последняя — в конце.
  • space-around: элементы позиционируются равномерно, распределенные с равным пространством, вокруг каждого ряда.
  • stretch (по умолчанию): элементы растягиваются вдоль контейнера.

Элементы контейнера

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

order

По умолчанию элементы отображаются «как есть». Однако свойство order управляет порядком, в котором они отображаются в контейнере.

.item {
  order: <integer>; /* default is 0 */
}
Боярскому элементу - боярское место
Боярскому элементу — боярское место

flex-grow

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

Если все элементы имеют flex-grow равный 1, оставшееся пространство в контейнере будет равномерно распределено для всех элементов. Если из них имеет значение 2 — он занимает вдвое больше места, чем другие. (или будет пытаться, хотя бы)

Хорошего элемента мало не бывает
Хорошего элемента мало не бывает

flex-shrink

Это свойство определяет способность элемента при необходимости уменьшаться.

.item {
  flex-shrink: <number>; /* default 1 */
}

Отрицательные числа недействительны.

flex-basis

Это определяет размер элемента по умолчанию перед распределением оставшегося пространства. Это может быть длина (например, 20%, 5rem и т.д.) или ключевое слово.

Ключевое слово auto значит «посмотреть мои свойства ширины или высоты» (которое временно выполнялось ключевым словом main-size до тех пор, пока оно не устарело). Ключевое слово content означает «размер основывает на основе содержимого элемента» пока не очень хорошо поддерживается, поэтому его трудно проверить, что делают его max-content, min-content и fit-content. Поэтому стоит удержаться от использования этих ключевых слов.

.item {
  flex-basis: <length> | auto; /* default auto */
}

Если установлено значение 0, дополнительное пространство вокруг содержимого не учитывается. Если установлено значение auto, дополнительное пространство распределяется на основе его значения гибкого роста.

flex

Это сокращение для flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink и flex-basis) являются необязательными. По умолчанию — 0 1 auto.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Рекомендуется использовать это сокращенное свойство, а не устанавливать индивидуальные свойства. Короткая комбинация задает другие значения разумно.

align-self

Это свойство позволяет переопределить выравнивание по умолчанию (или значение, указанное align-items) для отдельных элементов.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}


За основу статьи взята информация из CSS-Tricks / A Complete Guide to Flexbox

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!