Что такое Flexbox?

• Спецификация: CSS Flexible Box Layout Module
• Поддержка браузерами: http://caniuse.com/#feat=flexbox

Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков).

Для flex-контейнера

display со значением flex или inline-flex — определяет элемент как flex-контейнер

flex-direction — определяет напрвление главной оси flex-контейнера.

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

flex-wrap — определяет строковость flex-блоков внутри flex-контейнера.

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

flex-flow — сокращение для flex-direction и flex-wrap.

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

justify-content — определяет выравнивание flex-блоков вдоль главной оси flex-контейнера.

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

align-items — определяет выровнение flex-блоков вдоль поперечной оси flex-контейнера.

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

align-content — определяет выровнивание flex-блоков по вертикали flex-контейнера (работает только в многострочного flex-контейнета, т.е. в случае flex-wrap:wrap или flex-wrap:wrap-reverse).

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

Для flex-блока

flex-grow — определяет степень «жадность» flex-блока, т.е. насколько он может быть больше соседних (по умолчанию 0).

flex-shrink — определяет фактор «сжатия» flex-блока, т.е. насколько он будет уменьшаться относительно соседних в случае недостатка свободного места (по умолчанию 1).

flex-basis — определяет базовый (изначальный) размер (px, em, %, … , auto по умолчанию) flex-блока по главной оси flex-контейнера.

flex — сокращение для flex-grow, flex-shrink и flex-basis.

flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

align-self — определяет выравнивание flex-блока по поперечной оси, т.е. позволяет переопределить align-items flex-контейнера для отдельного flex-блока.

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

order — определяет порядок следования flex-блока внутри flex-контейнера.

margin со значением auto — центрирует flex-блока не только по горизонтали, но и по вертикали.