CSS Flexbox — одномерная (1D) технология layout. Горизонтально или вертикально размещает элементы. Со 2014 года изменил веб-дизайн.
Container и items
display: flex на родителе. Дети становятся flex items.
Main axis и cross axis
flex-direction: row (default), column, row-reverse, column-reverse.
justify-content (main axis)
flex-start, flex-end, center, space-between, space-around, space-evenly.
align-items (cross axis)
stretch (default), flex-start, flex-end, center, baseline.
flex-wrap
wrap — переход на новую строку.
Item свойства
flex-grow, flex-shrink, flex-basis. Shorthand: flex: 1 0 auto.
order
Изменение порядка элементов.
gap
Расстояние между элементами без margin.
Пример nav
display: flex, justify-content: space-between, align-items: center.
Пример cards
display: flex, flex-wrap: wrap, gap, flex: 1 0 300px.
Flexbox vs Grid
Flexbox — 1D. Grid — 2D. Разные задачи.
Поддержка
Все современные браузеры. IE 10+ частично.
Сайт.uz
Header, blog grid, footer — Flexbox. Mobile через media queries column.