Flexbox
Flexbox — это новый способ располагать блоки на странице. Это технология, созданная именно для раскладки элементов, в отличие от float-ов. С помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.
UPD от 02.02.2017: сделала удобную шпаргалку по флексбоксам, с живыми демками и описаниями из спеки: Flexbox cheatsheet.
В примерах используется только новый синтаксис. На момент написания статьи правильней всего они отображаются в Chrome. В Firefox работают частично, в Safari — вообще не работают.
Спецификация на английском есть тут: w3.org/TR/css3-flexbox.
Согласно сайту caniuse.com, Flexbox не поддерживается 8 и 9-м IE и Opera Mini, а в других браузерах поддерживаются не все свойства и/или требуются префиксы.
Это означает, что технологию нельзя широко использовать прямо сейчас, но уже самое время познакомиться с ней поближе.
Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси.
Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float, clear и vertical-align, а так же свойства, задающие колонки в тексте.
Приготовим полигон для экспериментов:
Один родительский блок (желтый) и 5 дочерних.
Display: flex
И теперь родительскому элементу добавляем display: flex;.
Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.
display: flex; делает все дочерние элементы резиновыми — flex, а не инлайновыми или блочными, как было изначально.
Если родительский блок содержит картинки или текст без оберток, они становятся анонимными flex-элементами.
Свойство display для Flexbox может принимать два значения:
flex — ведёт себя как блочный элемент. При рассчете ширины блоков приоритет у раскладки (при недостаточной ширине блоков контент может вылезать за границы).
inline-flex — ведёт себя как инлайн-блочный. Приоритет у содержимого (контент растопыривает блоки до необходимой ширины, чтобы строчки, по возможности, поместились).
Flex-direction
Направление раскладки блоков управляется свойством flex-direction.
Возможные значения:
row — строка (значение по умолчанию);
row-reverse — строка с элементами в обратном порядке;
column — колонка;
column-reverse — колонка с элементами в обратном порядке.
row и row-reverse:
column и column-reverse:
Flex-wrap
В одной строке может быть много блоков. Переносятся они или нет определяет свойствоflex-wrap.
Возможные значения:
nowrap — блоки не переносятся (значение по умолчанию);
wrap — блоки переносятся;
wrap-reverse — блоки переносятся и располагаются в обратном порядке.
Для короткой записи свойств flex-direction и flex-wrap существует свойство: flex-flow.
Возможные значения: можно задавать оба свойства или только какое-то одно. Например:
flex-flow: column;
flex-flow: wrap-reverse;
flex-flow: column-reverse wrap;
Демо для row-reverse wrap-reverse:
Order
Для управления порядком блоков служит свойствоorder.
Возможные значения: числа.
Чтобы поставить блок самым первым, задайте ему order: -1:
Justify-content
Для выравнивания элементов есть несколько свойств:justify-content, align-items и align-self.
justify-content и align-items применяются к родительскому контейнеру, align-self — к дочерним.
justify-content отвечает за выравнивание по главной оси.
Возможные значения justify-content:
flex-start — элементы выравниваются от начала главной оси (значение по умолчанию);
flex-end — элементы выравниваются от конца главной оси;
center — элементы выравниваются по центру главной оси;
space-between — элементы выравниваются по главной оси, распределяя свободное место между собой;
space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя.
flex-start и flex-end:
center:
space-between, space-around:
Align-items
align-items отвечает за выравнивание по перпендикулярной оси.
Возможные значения align-items:
flex-start — элементы выравниваются от начала перпендикулярной оси;
flex-end — элементы выравниваются от конца перпендикулярной оси;
center — элементы выравниваются по центру;
baseline — элементы выравниваются по базовой линии;
stretch — элементы растягиваются, занимая все пространство по перпендикулярной оси (значение по умолчанию).
flex-start, flex-end:
center:
baseline, stretch:
Align-self
align-self также отвечает за выравнивание по перпендикулярной оси, но задается отдельным flex-элементам.
Возможные значения align-self:
auto — значение по умолчанию. Означает, что элемент использует align-items родительского элемента;
flex-start — элемент выравнивается от начала перпендикулярной оси;
flex-end — элемент выравнивается от конца перпендикулярной оси;
center — элемент выравнивается по центру;
baseline — элемент выравнивается по базовой линии;
stretch — элемент растягивается, занимая все пространство по высоте.
flex-start:
Align-content
Для управления выравниванием внутри многострочного flex-контейнера есть свойствоalign-content.
Возможные значения:
flex-start — элементы выравниваются от начала главной оси;
flex-end — элементы выравниваются от конца главной оси;
center — элементы выравниваются по центру главной оси;
space-between — элементы выравниваются по главной оси, распределяя свободное место между собой;
space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя;
stretch — элементы растягиваются, заполняя всю высоту (значение по умолчанию).
flex-start, flex-end:
center, stretch:
space-between, space-around:
Ps: Некоторые штуки мне так и не удалось увидеть в действии, например, строчку flex-flow: column wrap или полную запись того же flex-direction: column; flex-wrap: wrap;.
Элементы стоят столбиком, но не переносятся:
Не срабатывает wrap при flex-direction: column;, хотя в спеке это выглядит вот так:
Думаю, со временем заработает.
UPD от 21.06.2014: всё работает, если задать блоку высоту. За подсказку спасибо SelenIT2.