Flexbox: one-dimensional layout along two axes

Create a flex container by setting display to flex (or inline-flex for an inline container); its direct children become flex items. Flexbox is a one-dimensional model handling layout as either a row or a column, defined by the flex-direction property's values: row, row-reverse, column, or column-reverse. That property establishes the main axis, with the cross axis running perpendicular to it, and flexbox reasons in terms of start and end edges rather than left and right so it supports all writing modes. By default, items display in a row along the main axis, starting from the start edge: they do not grow (flex-grow defaults to 0) but can shrink (flex-shrink defaults to 1), with flex-basis defaulting to auto, align-items defaulting to stretch so items fill the cross-axis size, and flex-wrap defaulting to nowrap, so overflowing items spill out of the container instead of wrapping. Scope: CSS flexbox. Reviewed October 4, 2026.