Flexbox

Основные преимущества flexbox:

• Все блоки очень легко делаются “резиновым”, что уже следует из названия “flex”. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
• Выравнивание по вертикали и горизонтали, базовой линии текста работает шикарно.
• Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов responsive верстки.
• Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
• Синтаксис CSS правил очень прост и осваивается довольно быстро.

Начало

Первое, что нужно сделать – это указать контейнеру:

display:flex

display:inline-flex

Главная и поперечная ось

Доступные значения flex-direction:

• flex-direction: row; (по умолчанию) : слева направо
• flex-direction: row-reverse; справа налево
• flex-direction: column; сверху вниз
• flex-direction: column-reverse; снизу вверх

Выравнивание по горизонтале

Доступные значения justify-content:

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

Выравнивание по поперечной оси

Доступные значения align-items:

• flex-start: блоки прижаты к началу поперечной оси
• flex-end: блоки прижаты к концу поперечной оси
• center: блоки располагаются в центре поперечной оси
• baseline: блоки выровнены по их baseline
• stretch (по умолчанию) : блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width/max-width, если таковые заданы.

Многострочная организация блоков внутри flex-контейнера

Доступные значения flex-wrap:

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

Удобное сокращение для flex-direction + flex-wrap

По сути,flex-flow предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси.

flex-flow: row nowrap.

flex-flow: flex-direction flex-wrap ;

Выравнивание по вертикали

Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!