Флексим

Флекс-контейнер: элемент, к которому применяется свойство display: flex. Вложенные в него элементы подчиняются правилам раскладки флексов.

Флекс-элемент: элемент, вложенный во флекс-контейнер.

Превращаем элемент в блочный или строчный (инлайн) флекс-контейнер:

display: flex; display: inline-flex;

Ось основная и поперечная

Основная ось: основная направляющая флекс-контейнера, вдоль которой располагаются флекс-элементы.

Поперечная (побочная, перпендикулярная) ось: ось, идущая перпендикулярно основной. Позже вы поймёте, для чего она нужна.

flex-direction: row

• row (значение по умолчанию) — основная ось идёт горизонтально слева направо, поперечная ось идёт вертикально сверху вниз.
• column — основная ось идёт вертикально сверху вниз, поперечная ось идёт горизонтально слева направо.
• row-reverse — основная ось идёт горизонтально справа налево, поперечная ось идёт вертикально сверху вниз.
• column-reverse — основная ось идёт вертикально снизу вверх, поперечная ось идёт горизонтально слева направо.

flex-wrap: nowrap

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

flex-flow: row nowrap

flex-flow — Это свойство-шорткат для одновременного определения значений свойств flex-direction и flex-wrap.

Выравнивание по оси

Начало / конец основной оси: точки в начале и в конце основной оси соответственно. Это пригодится нам для выравнивания флекс-элементов.

Начало / конец поперечной оси: точки в начале и в конце поперечной оси соответственно.

justify-content: start

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

align-items: stretch

• stretch (значение по умолчанию) — элементы растягиваются вдоль поперечной оси так, чтобы заполнить всего родителя. Это очень удобно, если вы делаете двухколоночный макет. Раньше приходилось при помощи разных костылей добиваться одинаковой высоты, а теперь достаточно сделать контейнер флексом, и колонки по умолчанию будут одной высоты.
• flex-start или start — элементы выстраиваются у начала поперечной оси. Разница между ними лишь в том, что второе значение «уважает» направление чтения выбранного языка.
• flex-end или end — элементы выстраиваются у конца поперечной оси. Разница между первым и вторым значениями аналогична предыдущему пункту.
• center — элементы выстраиваются по центру поперечной оси.
• baseline — элементы выравниваются по базовой линии текста. «Базовая линия» — baseline — воображаемая линия, проходящая по нижнему краю знаков шрифта (без учёта выносных элементов).

align-content: stretch

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

Размер по основной оси (основной размер): размер флекс-элемента вдоль основной оси. Это может быть ширина или высота в зависимости от направления основной оси.

Размер по поперечной оси (поперечный размер): размер флекс-элемента вдоль поперечной оси. Это может быть ширина или высота в зависимости от направления поперечной оси. Этот размер всегда перпендикулярен основному размеру. Если основной размер — это ширина, то поперечный размер — это высота, и наоборот.

flex: 0 1 auto

0 1 auto (Значение по умолчанию) - что расшифровывается как flex-grow: 0; flex-shrink: 1; flex-basis: auto;