Главная идея
В уроке 23 мы научились двигать элементы вдоль главной оси (justify-content).
Здесь — вторая половина Flexbox: выравнивание по поперечной оси (align-items,
align-self, align-content), удобные промежутки (gap) и управление тем,
как элементы делят свободное место (flex-grow, flex-shrink, flex-basis).
Главное помнить: justify-* и align-* работают по разным осям, поэтому
при flex-direction: column их роли визуально меняются местами.
gap — это как фиксированные промежутки между книгами на полке: ставишь книги вплотную к разделителям одинаковой толщины, и расстояние между ними всегда одинаковое — не нужно подкладывать прокладки (margin) под каждую книгу и помнить «последней — не подкладывать».
flex-grow — это «кто доедает оставшееся место за столом»: после того как каждому
положили его порцию (basis), добавку делят те, у кого аппетит больше (flex-grow больше).
Две оси — два набора свойств
Flexbox мыслит осями. Главная ось (main axis) — направление, заданное
flex-direction (по умолчанию строка, слева направо). Поперечная ось
(cross axis) — перпендикулярна ей. justify-content распределяет элементы вдоль главной оси,
а семейство align-* — вдоль поперечной.
align-items: выравниваем все элементы по поперечной оси
Чтобы разница была видна, контейнеру нужна «лишняя» высота (по поперечной оси), иначе все элементы
одинаковой высоты и выравнивать нечего. По умолчанию align-items: stretch — элементы
растягиваются на всю высоту контейнера.
stretch— растянуть на всю поперечную ось (по умолчанию, если у элемента нет фиксированной высоты);flex-start/flex-end— прижать к началу/концу поперечной оси;center— выровнять по центру поперечной оси;baseline— выровнять по базовой линии текста.
align-self: один элемент выбивается из строя
align-self задаётся на самом элементе и перебивает общий align-items
контейнера только для него. Удобно, когда вся строка выровнена по центру, а одну кнопку нужно прижать
к низу или растянуть.
gap вместо margin-хаков
Раньше промежутки между флекс-элементами делали через margin, а у последнего элемента
margin приходилось обнулять, чтобы не было лишнего отступа у края. gap убирает этот костыль:
он добавляет расстояние только между элементами, не создавая отступа снаружи.
gap: 16px — одинаковый промежуток по обеим осям; gap: 8px 24px —
row-gap: 8px (между строками) и column-gap: 24px (между колонками).
flex-grow / flex-shrink / flex-basis: как делится место
Это свойства элементов, а не контейнера. flex-basis — стартовый размер
элемента до распределения свободного места (по умолчанию auto). Если после раскладки осталось
свободное место — его делят пропорционально flex-grow (по умолчанию 0 — не растут).
Если места не хватает — элементы сжимаются пропорционально flex-shrink (по умолчанию 1).
Шорткат flex: 1 означает flex: 1 1 0 — «расти и сжимайся, дели место поровну».
flex: 1, кнопке ничего (останется flex: 0 1 auto).align-content: только при переносе строк
align-content выравнивает группы строк по поперечной оси и работает только
когда есть перенос (flex-wrap: wrap) и элементы заняли несколько строк. В одну строку оно
не делает ничего — частый источник путаницы с align-items.
baseline
и space-evenly у align-content различается между движками — сверяйтесь с MDN перед использованием в продакшене.align-items не «работает», потому что
контейнер по поперечной оси такой же по размеру, как элементы. Дайте контейнеру высоту (или используйте
flex-direction: column с явной шириной) — тогда выравнивание станет заметным.gap прямо на странице.