FlexBox

Основы

Для использования FlexBox нам нужен flex-контейнер и flex-элементы:

По-умолчанию flex-элементы будут расположены в ряд и будут растянуты на всю высоту родительского блока

.box {
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
}
.box.item {
	margin: auto; /*выравнивает flex-элементы по горизонтали и вертикали */
}

В flexbox есть два типа осей - вертикальная и горизонтальная, они проходят через центр flex-контейнера

Ориентация оси задается свойством flex-direction

.box {
	/* направление оси */
	flex-direction: row; /*горизонтально*/
	flex-direction: column; /*вертикально*/
	flex-direction: row-reverse; /*горизонтально с права на лево*/
	flex-direction: column-reverse; /*вертикально снизу (flex-элементы будут выстраиватся начиная с нижнего края lex-контейнера)*/
}

Выравнивание flex-элементов

Cпособ распределения flex-элементов задается свойством justify-content

.box {
	justify-content: flex-start; /*по-умолчанию*/
	justify-content: flex-end; /*порядок выстраивания блоков не изменился но они прижались к концу оси*/
	justify-content: space-between; /*распределяются равномерно по всей длине оси, прижимаясь к краям*/
	justify-content: space-around; /*аналогично space-between но с авто-отступами*/
	justify-content: center; /*блоки будут сгупированны по центру оси*/
}

Cпособ выравнивания flex-элементов относительно поперечной оси задается свойством align-items

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

.box {
	align-items: stretch; /*по-умолчанию, блоки растягиваются поперек оси*/
	align-items: center; /*блоки становятся по центру поперечной оси*/
	align-items: flex-end; /*прижимаются к концу поперечной оси*/
	align-items: flex-start; /*прижимаются к началу поперечной оси*/
	align-items: baseline; /*выравниваются относительно базовой линии (зависит от высоты строки)*/
}

Выравнивание рядков из flex-элементов

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

.box {
	flex-wrap: nowrap; /*не разрешает новые рядки*/
	flex-wrap: wrap; /*элементы переносятся на новые рядки*/
	flex-wrap: wrap-reverse; /*рядки выстраиваются в обратном порядке, прижимаясь к обратной стороне поперечной оси. По-сути, это изменяет направление поперечной оси для рядков (не блоков)*/
}

По-умолчанию, если размер группы элементов больше ширины/высоты контейнера, они ужимаются для того, чтобы поместится в контейнер согласно заданым свойствам.

Свойство align-content управляет способом выравнивания рядков, аналогично свойству для блоков - justify-content.

.box {
	align-content: stretch; /*по-умолчанию*/
	align-content: center; /* рядки становятся по центру поперечной оси */
	align-content: space-between; /* рядки выравниваются по всей длине поперечной оси */
	align-content: space-around; /* рядки выравниваются по всей длине поперечной оси с автоматическими отступами по краям */
	align-content: flex-start; /* рядки прижаты к началу поперечной оси */
	align-content: flex-end; /* рядки прижаты к концу поперечной оси */
}

Свойство flex-flow это комбинация flex-direction и flex-wrap, в нем указываем два значения через пробел.

Свойства flex-элементов

.item {
	flex-basis: auto; /* размер блока рассчитывается исходя из контента */
	flex-basis: 100px; /* ширина или высота блока (в зависимости от направления оси) */
}

Свойство flex-grow задает приоритет захвата пространства. Оно работает только если есть свободное пространство.

Например, есть два блока с flex-basis: 100px, flex-grow: 2 и flex-grow: 3. Размер контейнера 500px.

Свободное пространство: 500px - (2*100px) = 300px. Это пространство и делят между собой блоки.

Размер относительной единицы: 300px / (2 + 3) = 60px.

Размер первого блока: 60px*2 + 100px = 220px.

Размер второго блока: 60px*3 + 100px = 280px.

.item {
	flex-basis: 100px;
	flex-grow: 1; /* 0 - infinity */
}

Свойство flex-shrink работает так же как и flex-grow для случая, когда свободного места нет.

Значение определяет, сколько своего размера может отдать блок.

Свойство flex объединяет свойства flex: grow shrink basis;

Свойство align-self это аналог align-items, но уже для flex-элемента.

Свойство order (по-умолчанию: 0) задает порядок блока.