CSS Flexbox is a one-dimensional (1D) layout technology. It arranges elements horizontally or vertically. Since 2014 it has reshaped web design.
Container and items
display: flex on the parent. Children become flex items.
Main axis and 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 โ items move to a new line.
Item properties
flex-grow, flex-shrink, flex-basis. Shorthand: flex: 1 0 auto.
order
Changes the order of items.
gap
Space between items without margin tricks.
Nav example
display: flex, justify-content: space-between, align-items: center.
Cards example
display: flex, flex-wrap: wrap, gap, flex: 1 0 300px.
Flexbox vs Grid
Flexbox is 1D. Grid is 2D. Different jobs.
Support
All modern browsers. IE 10+ partial.
Sayt.uz
Header, blog grid, footer use Flexbox. Mobile switches direction via media queries.