Webstacker

Онлайн-журнал с мира Web и Front End: Новости, статьи, хитрости и гайды на русском. Полезные и уникальные материалы для программистов и дизайнеров

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

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

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

Дисклеймер

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

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

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

Почему Flex?

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

Контейнер

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

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

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

flex-direction

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

Всё просто - вверх, вниз, вправо, влево
Всё просто — вверх, вниз, вправо, влево

flex-wrap

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

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Перенос элементов - это ТАК просто!
Перенос элементов — это ТАК просто!

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;
}
Выравнивание вдоль основной оси
Выравнивание вдоль основной оси

align-items

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

.container { 
  align-items: 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;
}

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

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

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-разработки. Понравилась статья? Расскажи об этом друзьям!

Наш Telegram-канал