Простыми словами, flexbox layout (флексбокс) это набор CSS правил описывающий принцип, который помогает разработчику удобно располагать блоки относительно друг друга и эффективнее использовать свободное место между блоками на странице.

Использование flexbox решает старую наболевшую проблему — центрирование блоков по вертикали при неизвестной высоте как самих блоков, так и подложки под ними.

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

Самое важное во flexbox, это то, что этот принцип не зависит от общего направления отрисовки страницы и других блоков (display: block, которые следуют друг за другом вертикально и display: inline, которые располагаются горизонтально друг от друга). Старый принцип (block,inline,inline-block) работает отлично, но для простых страниц. Современные сложные динамические интерфейсы требуют более эффективный подход.

Терминология

Потому как flexbox Это отдельный принцип расположения блоков, а не просто CSS свойство, помимо прочего, он включает в себя целый набор свойств. Некоторые из этих свойств предназначены для применения на родительском контейнере (flex container) тогда как другие — на дочерних (flex items).

Если обычный метод верстки строится на порядке следования отрисовки страницы, flex использует свой принцип для выстраивания порядка следования дочернихблоков (flex-flow directions).

Предлагаю взглянуть на изображение из спецификации и разобрать все термины по порядку.

Общая схема flexbox layout

В общих чертах, можно сказать, что блоки внутри родительского контейнера будут располагаться по главной оси (main axis) от начала (main-start) до конца оси (main-end) или же по перпендикулярной оси (cross axis) от начала (cross-start) до конца оси (cross-end).

Термины на изображении

• main axis - главная ось по которой располагаются дочерние объекты. Кстати, совсем не обязательно это должна быть горизонтальная ось, это завсист от указанного вами flex-direction свойства (см.ниже).
• main-start | main-end - дочерние блоки располагаются от main-start и до main-end. Фактически начало и конец оси.
• main size - длина или ширина доступная для заполнения дочерними элементами вдоль главной оси.
• cross axis - ось, перпендикулярная главной оси. Направление перпендикулярной оси зависит от того, какую ось вы указали в качестве главной.
• cross-start | cross-end - начало и конец перпендикулярной оси, по которой будут располагаться дочерние элементы.
• cross size- длина или ширина доступная для заполнения дочерними элементами вдоль перпендикулярной оси.

В итоге нас есть Родительский элемент (flex container), в котором расположены дочерние элементы (flex item) и набор правил для управления выводом этих элементов. Давайте последовательно разберем эти свойства.

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

display

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

flex-direction

Это свойство определяет главную ось и направление расположения блоков вдоль нее. В общих чертах flexbox располагает блоки либо по горизонтали (row) либо по вертикали (column) вдоль оси.

• row - (по умолчанию) слева на право (ltr) либо справа на лево (rtl);
• row-reverse - меняет порядок на противоположный;
• column - тоже самое что и row но для направления сверху в низ;
• column-reverse - меняет направление для вертикальной оси.

flex-wrap

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

• nowrap - (используется по умолчанию) расположение блоков в одну строку;
• wrap - расположение в несколько линий (похоже на перенос по словам в письменной речи);
• wrap-reverse - расположение в несколько линий только в обратном направлении главной оси.

flex-flow

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

justify-content

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

• flex-start - (по умолчанию) дочерние элементы группируются у стартовой лини (main-start на общей схеме) вдоль главной оси;
• flex-end - дочерние элементы группируются у конечной линии (main-end на общей схеме) вдоль главной оси;
• center - дочерние элементы центрированы по центру главной оси;
• space-between - первый элемент на стартовой лини (main-start на общей схеме), последний на конечной линии(main-end на общей схеме), а свободное пространство распределяется равномерно между оставшимися элементами;
• space-around - распределяет свободное место для всех дочерних элементов равномерно, но с учетом индивидуальных свойств отступов для дочерних элементов.

align-items

Это свойство определяет расположение дочерних элементов (flex items) относительно друг друга по перпендикулярной оси. Можно сказать что это свойство такое же как justify-content только для перпендикулярной оси. Чем то напоминает мне свойство vertical-align для inline-block элементов.

• flex-start - начальная граница перпендикулярной оси (cross-start на общей схеме);
• flex-end - конечная граница перпендикулярной оси (cross-end на общей схеме);
• center - дочерние объекты располагаются относительно центра перпендикулярной оси;
• baseline - элементы располагаются по базовой линии относительно друг друга;
• stretch - (по умолчанию) элементы вытягиваются вдоль перпендикулярной оси и занимают все пространство родительского блока.

align-content

Это свойство выравнивает линии внутри родительского контейнера вдоль перпендикулярной оси (cross-axis на общей схеме), аналогично тому как работает свойство justify-content только не для отдельного элемента а для всей строки (линии) элементов сразу.

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

• flex-start - линии группируются у стартовой позиции перпендикулярной оси контейнера;
• flex-end - линии группируются у конечной позиции перпендикулярной оси;
• center - линии группируются по центру перпендикулярной оси;
• space-between - Первая линия элементов располагается у стартовой позиции оси а последняя у конечной. Линии между первой и последней распределяются равномерно между собой вдоль перпендикулярной оси;
• space-around - линии равномерно распределены относительно друг друга вдоль перпендикулярной оси с равным расстоянием между друг другом;
• stretch - линии равномерно расширяются чтобы занять все свободное пространство относительно перпендикулярной оси.

Свойства дочерних объектов (flex items)

order

По умолчанию дочерние объекты расположены в поредяке следования по исходному коду. Это свойство позволяет контролировать порядок отображение объектов относительно друг друга.

flex-grow

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

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

flex-shrink

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

flex-basis

Это свойство определяет размер элемента по умолчанию, перед тем как произойдет распределение свободного пространства между остальными элементами. Если указано свойство main-size то тогда flex-basis будет равно css свойствам height или width этого элемнта, в зависимости от того какая ось и направление активны.

flex

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

Рекомендуется использовать именно это свойство вместо использования отдельных flex-grow, flex-shrink и flex-basis.

align-self

Это свойство позволяет индивидуально выравнивать конкретный выбранный элемент относительно других. Имеет приоритет над общим свойством align-items.

Вот собственно и все.

Данная заметка является моим вольным переводом оригинальной статьи Криса Койера, Там вы можете уточнить информацию а так же найти примеры использования, таблицу поддержки flexbox в различных браузерах и т.д.