Что такое Flexbox?
FreePR42- Спецификация: 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-блока не только по горизонтали, но и по вертикали.