Flexbox is a one-dimensional CSS layout model designed to distribute space
along a single axis—either as a row or a column. It simplifies tasks like
centering, spacing, and ordering items, even when their size is unknown or dynamic.
To enable Flexbox, set display: flex (or inline-flex)
on a container and then control alignment and distribution with a handful of properties.
display: flex | inline-flex Link
flex-direction: row | row-reverse |
column | column-reverse Link
flex-wrap: nowrap | wrap |
wrap-reverse Link
flex-flow: shorthand for
flex-direction & flex-wrap
(<direction> <wrap>) Link
justify-content: flex-start | center |
flex-end | space-between |
space-around | space-evenly Link
align-items: flex-start | center |
flex-end | stretch | baseline Link
align-content: flex-start | center |
flex-end | space-between | space-around |
stretch Link
gap, row-gap, column-gap:
length values (e.g. 1rem, 10px) Link
order: integer (default 0)
— controls the visual order of items Link
flex-grow: non-negative number (default 0)
— defines how much an item will grow relative to its siblings Link
flex-shrink: non-negative number (default 1)
— defines how much an item will shrink relative to its siblings Link
flex-basis: auto | length | content
(default auto) — sets the initial main size Link
flex: shorthand for
flex-grow, flex-shrink, flex-basis
(e.g. flex: 1 0 100px) Link
align-self: auto | flex-start |
center | flex-end | baseline |
stretch — overrides the container’s align-items
for a single item Link