CSS3 Flexible Box — это новая спецификация разметки, позволяющая создавать макеты страниц и размещать блоки на странице таким образом, чтобы они вели себя предсказуемо в тех случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.
Элементы типа block используют вертикальный макет размещения. Элементы типа inline - горизонтальны. Flexbox позволяет и то и другое. Flexbox удобен, в частности, для устройств типа мобильных, где иногда нужно полностью менять макет страницы с горизонтального на вертикальный.
Вместо терминологии block и inline элементов flexbox исользует термины: главная и перпендикулярная оси (main axis и cross axis).
Родительский элемент, в котором содержатся все остальные flexible - элементы. Flex - контейнер определяется с использованием значений flex или inline-flex свойства display.
Элемент (item)
Каждый дочерний элемент flex - контейнера становится flex - элементом.
Оси (axis)
Каждый flexbox макет использует две оси. Главная и перепендикулярная. Flex - элементы следуют один за другим вдоль главной оси (main-axis).
Направления (directions)
Границы flex- контейнера ( main start/main end и cross start/cross end ) определяют задают начальные и конечные точки для перемещений flex-элементов внутри контейнера.
Строки (lines)
Элементы Flex могут быть размещены либо на одной строке, либо на нескольких строках в соответствии с свойством flex-wrap, которое управляет направлением поперечной оси и направлением, в котором формируются новые строки.
Размеры (dimensions)
Для flex-элементов свойства width и height задают размеры.
Свойство flex сокращает описание свойств flex-grow, flex-shrink, flex-basis для описаниия адаптивных размеров flex-элементов.
Свойство | Описание | Значения | Пример | |
---|---|---|---|---|
display | Тип flex-контейнера | flex inline-flex |
display:flex; display: -webkit-flex; |
|
flex-direction | Определяет направление размещения flex-элементов внутри flex-контейнера | flex-direction | flex-direction: row-reverse; -webkit-flex-direction: row-reverse; |
|
justify-content | Выравнивает горизонтально элементы flex в случае, если они не занимают всё пространство по главной оси. | flex-start flex-end center space-between space-around initial inherit |
div { -webkit-justify-content: space-around; justify-content: space-around; } |
|
align-items | Свойство align-items указывает выравнивание по умолчанию для элементов внутри flex-контейнера. Можно использовать свойство align-self для каждого элемента, чтобы переопределить свойство align-items. |
stretch center flex-start flex-end baseline initial inherit; |
div { -webkit-align-items: center; align-items: center; } |
|
flex-wrap | Указывает, должны ли flex-элементы переноситься на другую строку, если им недостаточно места в одной строке | nowrap wrap wrap-reverse initial inherit |
div { -webkit-flex-wrap: wrap; flex-wrap: wrap; } |
|
align-content | Модифицирует поведение свойства flex-wrap. Похоже на align-items, но вместо выравнивания flex-элементов выравнивает строки | stretch center flex-start flex-end space-between space-around i nitial inherit |
div { -webkit-align-content: center; align-content: center; } |
|
flex-flow | Сокращение для свойств flex-direction и flex-wrap | flex-flow: flex-direction flex-wrap|initial|inherit; | div { -webkit-flex-flow: row-reverse wrap; flex-flow: row-reverse wrap; } |
|
order | Задаёт порядок следования flexible элементов относительно остальных внутри одного контейнера | number initial inherit |
-webkit-order: 2; order: 2; |
|
align-self | Используется для flex-элементов. Переопределяет свойство контейнера align-items | auto stretch center flex-start flex-end baseline initial inherit |
div { -webkit-align-self: center; align-self: center; } |
|
flex | Задаёт длину flex-элемента по отношению к остальным внутри того же контейнера | flex-grow flex-shrink flex-basis auto|initial|inherit | div { -webkit-flex: 1; -ms-flex: 1; flex: 1; } |
|
flex-grow | Указывает, насколько элемент будет увеличиваться относительно остальных элементов внутри одного и того же контейнера | |||
flex-shrink | Свойство определяет, как элемент будет уменьшаться относительно остальных гибких элементов внутри одного контейнера | |||
flex-basis | Свойство задает начальную длину flex-элемента | div:nth-of-type(2) { -webkit-flex-basis: 80px; flex-basis: 80px; } |
||