Flexbox

До flexbox, чтобы выровнять блок по центру по вертикали, нужны были хитрости. С display: flex хватает двух объявлений: justify-content и align-items.

Одна строка или один столбец

Flexbox, модуль CSS Flexible Box Layout, располагает группу блоков вдоль одной линии. Задай контейнеру display: flex, и его прямые потомки, флекс-элементы, выстроятся рядом, а не друг под другом. Одного этого объявления хватит для строки меню, ряда кнопок или карточки, у которой нижняя часть должна прилипать к низу. Flexbox работает в одном измерении за раз: либо строка, либо столбец. Когда нужны строки и столбцы вместе, обычно лучше подходит grid из следующего урока.

Две оси

Всё во flexbox описывается через две оси. Главная ось является направлением, в котором идут элементы, его задаёт flex-direction: row (по умолчанию) или column. Поперечная ось идёт под прямым углом к ней. justify-content распределяет элементы вдоль главной оси: flex-start, center, flex-end, space-between (первый и последний элементы у краёв, между ними равные промежутки) или space-around. align-items располагает их на поперечной оси: stretch (по умолчанию, все элементы высотой с самый высокий), flex-start, center или flex-end. Поэтому блок выравнивается по центру в обоих направлениях с помощью justify-content: center и align-items: center.

.bar {
  display: flex;
  justify-content: space-between;  /* logo left, menu right */
  align-items: center;             /* vertically centred */
  gap: 16px;                       /* space between items */
}
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card  { flex: 1 1 200px; }        /* grow, shrink, start at 200px */

Промежутки и перенос

gap добавляет пространство между элементами, не добавляя его по внешним краям: обычно нужно именно это, а с внешними отступами так сделать неудобно. По умолчанию флекс-элементы остаются на одной строке и сжимаются, чтобы поместиться, даже если их это сплющивает. flex-wrap: wrap позволяет им переходить на новую строку, когда места не хватает, так что ряд из четырёх карточек на ноутбуке может стать двумя рядами по две на планшете и одним столбцом на телефоне, без медиазапросов.

Как элементы растут и сжимаются

Сокращение flex у элемента принимает три значения. flex-grow говорит, какую долю оставшегося места элемент берёт по сравнению с соседями; flex-shrink говорит, насколько охотно он сжимается, когда места не хватает; flex-basis является его начальным размером до роста или сжатия. flex: 1 1 200px значит: начать с 200 пикселей, а затем поровну делить лишнее место с другими элементами, у которых рост тоже равен 1. flex: 1 сам по себе является сокращением для 1 1 0%, и все элементы получают одинаковую ширину. Задай одному элементу flex-grow: 2, а остальным 1, и он возьмёт вдвое больше оставшегося места, чем каждый из них.

Видимый порядок и настоящий порядок

Flexbox может менять порядок, в котором показываются элементы, с помощью flex-direction: row-reverse или свойства order, не трогая HTML. Пользуйся этим осторожно. Фокус клавиатуры и экранные дикторы по-прежнему следуют порядку в HTML, поэтому если на экране Contact стоит перед Home, а Tab сначала попадает на Home, пользователи клавиатуры запутаются. Если порядок важен для смысла, меняй его в HTML.