Свойства контейнера (flex-container)
| Свойство | Значения | Что делает |
|---|---|---|
align-items | stretch (по умолч.) · flex-start · flex-end · center · baseline | Выравнивает все элементы по поперечной оси. |
align-content | stretch · flex-start · flex-end · center · space-between · space-around | Выравнивает строки по поперечной оси. Только при переносе (flex-wrap: wrap) и нескольких строках. |
gap | 16px · 1rem · 8px 24px | Промежуток между элементами. Одно значение — по обеим осям; два — row column. |
row-gap / column-gap | длина | Отдельно промежуток между строками / между колонками. |
Свойства элемента (flex-item)
| Свойство | Значения / по умолч. | Что делает |
|---|---|---|
align-self | auto (по умолч.) · те же, что у align-items | Перебивает align-items контейнера для одного элемента. |
flex-grow | число, 0 | Доля свободного места, которую забирает элемент. 0 — не растёт. |
flex-shrink | число, 1 | Насколько элемент сжимается при нехватке места. 0 — не сжимается. |
flex-basis | длина / auto | Стартовый размер до распределения места. |
flex | flex: 1 = 1 1 0 | Шорткат grow shrink basis. flex: 1 — равные доли; flex: 0 0 auto — фиксированный. |
Важно: свойства контейнера и свойства элемента не взаимозаменяемы.
Если правило не работает — сначала проверьте, на каком элементе оно написано (на родителе или на ребёнке).
Запомнить:
justify-* — вдоль главной оси, align-* — вдоль поперечной.
При flex-direction: column оси меняются местами.