Понятия
| Понятие | Что это |
|---|---|
main axis (главная ось) | Направление, вдоль которого выстраиваются flex-элементы. Задаётся через flex-direction. |
cross axis (поперечная ось) | Ось, перпендикулярная главной. |
Свойства контейнера (display: flex)
| Свойство | Значения | Назначение |
|---|---|---|
flex-direction | row (по умолч.) · row-reverse · column · column-reverse | Направление главной оси. |
justify-content | flex-start (по умолч.) · center · flex-end · space-between · space-around · space-evenly | Выравнивание и распределение свободного места вдоль главной оси. |
align-items | stretch (по умолч.) · flex-start · center · flex-end · baseline | Выравнивание элементов поперёк (по cross-оси). |
flex-wrap | nowrap (по умолч.) · wrap · wrap-reverse | Разрешает перенос элементов на новые линии. |
Различие space-*:
space-between — без отступов по краям; space-around — половинный отступ по краям; space-evenly — равные отступы везде, включая края.Важно: все эти свойства пишутся на контейнере. На flex-элементе они не работают. Если правило не сработало — проверьте, на каком элементе оно написано.