Свойства flex-контейнера (пишутся на родителе)
| Свойство | Значения | Что делает |
|---|---|---|
display | flex, inline-flex | Включает flex-раскладку: дети становятся 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 | Выравнивание элементов вдоль поперечной оси. |
flex-wrap | nowrap (умолч.), wrap, wrap-reverse | Разрешает перенос элементов на новую строку, если не помещаются. |
gap | длина, напр. 1rem | Промежутки между элементами (без margin-хаков). |
Свойства flex-элемента (пишутся на детях)
| Свойство | Назначение |
|---|---|
flex | Краткая запись flex-grow flex-shrink flex-basis, напр. flex: 0 1 16rem. |
align-self | Переопределяет align-items для одного конкретного элемента. |
Важно: свойства контейнера и свойства элемента не
взаимозаменяемы. Например,
justify-content на дочернем блоке не сработает — оно
принадлежит контейнеру. Если правило «не действует», сначала проверьте, на ком оно написано.Как проверять: выделите контейнер в DevTools и включите
Flexbox overlay — увидите направление осей и промежутки.