Flexbox one-dimensional layout fundamentals

Flexbox as a one-dimensional layout method

Flexbox is a one-dimensional CSS layout method used to arrange items in either a row or a column. Flex items automatically expand to fill available space or shrink to fit smaller spaces, making it well-suited for responsive layouts. By setting display: flex on a parent element, that parent becomes a flex container and its children become flex items, which are then laid out along defined axes. The flex model uses a main axis (the direction items are laid out) and a cross axis (perpendicular to the main axis). Flexbox supports changing direction with flex-direction (including reverse variants), wrapping items onto new lines with flex-wrap (or the flex-flow shorthand), and controlling how space is distributed using the flex property (flex-grow, flex-shrink, and flex-basis). It also provides alignment and justification controls (align-items/align-self for the cross axis, justify-content for the main axis) and allows reordering items visually with the order property without changing their source order. Flexbox can be nested, enabling complex layouts where a flex item can also be a flex container.

0/2 modes complete

Flex container and flex item terminology

0/2 modes complete