Чем justify-content отличается от align-items во flexbox?
Постоянно путаю эти два свойства: то одно сработает не туда, то другое. В чём разница между justify-content и align-items простыми словами, и какое за какую ось отвечает?
2 ответа
У флексбокса есть две оси, и каждое свойство управляет своей:
justify-content— раскладка по главной оси (по направлениюflex-direction).align-items— выравнивание по поперечной оси (перпендикулярной главной).
По умолчанию flex-direction: row, значит главная ось горизонтальная:
.row {
display: flex;
justify-content: space-between; /* распределяет по ГОРИЗОНТАЛИ */
align-items: center; /* выравнивает по ВЕРТИКАЛИ */
height: 100px;
}
Запоминалка: justify = вдоль строки (раздвигает элементы по ширине: flex-start, center, flex-end, space-between, space-around, space-evenly). align = поперёк строки (прижимает по высоте: flex-start, center, flex-end, stretch).
Главная ловушка: если поменять flex-direction на column, оси меняются местами — теперь justify-content управляет вертикалью, а align-items горизонталью. Поэтому думайте не «горизонталь/вертикаль», а «главная/поперечная ось» — тогда путаницы не будет.
Добавлю про множественное число: есть ещё align-content (с буквой s в смысле «контент») — он управляет распределением строк целиком, когда включён flex-wrap: wrap и строк несколько. А align-items выравнивает элементы внутри одной строки. Новички часто берут align-content, когда строка одна, и удивляются, что ничего не происходит.