Полное руководство по Flexbox

Перевод
Автор оригинала Chris Coyier
Оригинал A Complete Guide to Flexbox
Полное руководство по Flexbox
Модуль Flexbox Layout (Flexible Box) направлен на то чтобы предоставить более эффективный способ расположения, выравнивания и распределения свободного пространства между элементами в контейнере, даже когда их размер заранее неизвестен и/или динамичен (поэтому слово "flex").

Основная идея гибкой (flex) разметки заключается в том, чтобы предоставить контейнеру возможность изменять ширину/высоту (и порядок) своих элементов, для того чтобы наилучшим образом заполнить доступное пространство (в основном для размещения на всех типах и размерах экранов). Flexbox контейнер расширяет элементы чтобы заполнить свободное пространство или сжимает их чтобы избежать переполнения.

Самое главное, что Flexbox это направленный агностик в отличии от обычных раскладок (блоков основанных на вертикальном позиционировании и строковых элементов основанных на горизонтальном позиционировании). Не смотря на то что они достаточно хорошо работают, им не хватает гибкости для поддержки больших или сложных приложений (особенно когда речь идёт об изменении ориентации, изменении размеров, растягивании, сжатии и т. д.). 

Примечание. Flexbox больше подходит для компонентов приложения и небольших макетов, тогда как CSS Grid предназначен для более масштабных макетов.

Так как Flexbox - это целый модуль, а не отдельное свойство, он содержит множество различных вещей, включая целый набор свойств. Некоторые из них предназначены для установки их контейнеру (родительский элемент, известный как "flex-контейнер"), а другие должны устанавливаться дочерним элементам (известные как "flex-элементы"). 

Если обычная система компоновки основана на блочных и строковых направлениях, то Flexbox основан на "flex-flow направлениях". Пожалуйста взгляните на этот рисунок из спецификации, объясняющий основную идею Flexbox.

Flexbox Layout

В основном элементы будут располагаться вдоль основной оси (от main-start к main-end) или попереченой оси (от cross-start к cross-end).

  • main axis - это основная ось flex-контейнера, вдоль которой расположены flex-элементы. Берегитесь того, что это не обязательно горизонтальная ось; Она зависит от свойства flex-direction;
  • main-start | main-end - flex-элементы размещаются внутри контейнера, начиная с main-start и заканчивая main-end;
  • main size - ширина или высота flex-элемента, в зависимости направления основной оси;
  • cross axis - это ось перпендикулярная основной оси, которая называется "поперечной" осью. Её направление зависит от направления основной оси;
  • cross-start | cross-end - - flex-элементы размещаются внутри контейнера, начиная с cross-start и заканчивая cross-end;
  • cross size - ширина или высота flex-элемента, в зависимости направления поперечной оси;

Разделено на версии Flexbox:

  • (new) означает недавний синтаксис из спецификации (например display: flex;);
  • (tweener) означает добавочный неофициальный синтаксис с 2011 года (например display: flexbox;);
  • (old) означает старый синтаксис с 2009 года (например display: box;); 
Chrome Opera Firefox IE Safari Android iOS
20- (old)
21+ (new)
12.1+ (new) 2-21 (old)
22+ (new)
10 (tweener)
11+ (new)
3.1+ (old)
6.1+ (new)
10 (tweener)
11+ (new)
 3.2+ (old)
7.1+ (new)

Браузер Blackberry начиная с 10 версии поддерживает новый синтаксис.

Свойства для контейнера

Свойства для элементов

 

Свойства для родительского элемента
(Flex-контейнера)

# display

Определяет flex-контейнер; строковый или блочный зависит от переданного значения. Включает flex-контекст для всех своих прямых, дочерних элементов.

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

Обратите внимание, что CSS колонки не влияют на flex-контейнер.

Flex Direction

Устанавливает основную ось, таким образом определяет направление элементов расположенных в контейнере. Flexbox (помимо опциональной обёртки) представляет собой концепцию однонаправленного макета. Думайте о flex-элементах, прежде всего как горизонтальных строках или вертикальных колонках.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row (по умолчанию) -  слева направо в ltr; справа налево в rtl;
  • row-reverse - справа налево в ltr; слева направо в rtl;
  • column - тоже самое что row, только сверху вниз;
  • column-reverse - тоже самое что row-reverse, только снизу вверх;

Flex Wrap

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

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

Это сокращение для свойств flex-direction и flex-wrap, которые вместе определяют основную и поперечные оси контейнера. По умолчанию row nowrap.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

Flexbox Justify Content

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

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

Flexbox Align Items

Это свойство определяет поведение flex-элементов вдоль поперечной оси на текущей строке. Думайте о нём как о justify-content, только для поперечной оси (перпендикулярной основной оси).

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

Flexbox Align 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 (по умолчанию) - строки растягиваются по всей ширине, чтобы занять оставшееся пространство;

Свойства для дочерних элементов
(Flex элементов)

# order

Flex Order

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

.item {
  order: <integer>;
}

# flex-grow

Flexbox Flex Grow

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

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

.item {
  flex-grow: <number>; /* default 0 */
}

Нельзя указывать отрицательные числа.

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

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

Нельзя указывать отрицательные числа.

Определяет размер элемента по умолчанию, до распределения оставшегося пространства. Это может быть длина (20%, 5rem и т.д.) или ключевое слово. Ключевое слово auto означает "выглядеть как моё свойство width или height". Ключевое слово content означает что "размер основан на содержимом элемента" - это ключевое слово пока не очень хорошо поддерживается, поэтому его трудно проверить, а ещё труднее узнать что делают его братья min-content, max-content и fit-content.

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

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

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

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

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

Flexbox Align Self

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

Пожалуйста посмотрите на объяснение свойства align-items, чтобы понимать доступные значения.

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

Обратите внимание, что float, clear и vertical-align не оказывают никакого влияния на flex-элемент.

Примеры

 Давайте начнём с самого простого примера, решающего задачу, которая возникает почти каждый день: идеальное центрирование. Не может быть ничего проще, если вы используете Flexbox.

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

Это зависит от того, что margin, установленный в auto у flex-контейнера, поглощает дополнительное пространство. Таким образом, установка вертикального margin в auto у элемента, сделает элемент идеально центрированным по обеим осям.

Теперь давайте используем ещё несколько свойств. Рассмотрим список из 6 элементов, все с фиксированным размером в эстетическом отношении, но они могут быть автоматическими. Мы хотим, чтобы они были равномерно распределены вдоль горизонтальной оси и чтобы при изменении размера браузера всё было в порядке (без медиа-запросов!).

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

Готово! Всё остальное, это лишь некоторые проблемы дизайна. Ниже приведён пример на CodePen, обязательно зайдите туда и попробуйте изменить размер окон, чтобы посмотреть что произойдёт.

See the Pen Demo Flexbox 1 by CSS-Tricks (@css-tricks) on CodePen.

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

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

See the Pen Demo Flexbox 2 by CSS-Tricks (@css-tricks) on CodePen.

Давайте попробуем сделать что-нибудь ещё лучше, играясь с гибкостью наших flex-элементов! Как насчёт трёхколоночного mobile-first макета с шапкой и футером на всю ширину экрана, и чтобы не было зависимости от исходного порядка элементов.

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

/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. nav
 * 3. main
 * 4. aside
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

See the Pen Demo Flexbox 3 by CSS-Tricks (@css-tricks) on CodePen.

Безусловно Flexbox не без ошибок. Лучшая коллекция, которую я видел представлена Philip Walton и Greg Whitworth's Flexbugs. Это Open Source место для отслеживания всех ошибок, поэтому я думаю, что лучше всего просто оставить ссылку. 

Комментарии

# 13 июля 01:50 ergonomic.code
Нельзя делать фолбэк в виде: display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; display: -webkit-box; и display: -moz-box; не умеют flex-wrap. На этом моменте можно получить множество проблем.
# 13 июля 17:18 Антон Запевалов
Не могу найти в статье чтобы было написано что-то про этот фолбэк. Может напишете как нужно делать?
Для того чтобы оставлять комментарии, вам необходимо авторизоваться. Вход