Flexbox (Flexible Box Layout) is a CSS layout model designed for distributing space and aligning content in a one-dimensional layout (a single row or column). It replaced the float and table-based hacks that developers used for decades and is now the go-to solution for most UI layout tasks that do not require a two-dimensional grid.
The Flex Container and Flex Items
Flexbox involves a parent element (the flex container) and its direct children (flex items). Setting display: flex on the container activates the flexbox layout for all its direct children. The container controls the direction and distribution; the items control how they grow, shrink, and align within the space the container provides.
Container Properties
flex-direction controls the main axis: row (the default, left to right), row-reverse (right to left), column (top to bottom), or column-reverse (bottom to top).
justify-content distributes items along the main axis: flex-start (default, items grouped at the start), flex-end, center, space-between (equal space between items), space-around (equal space around each item), and space-evenly (equal space between all items and the edges).
align-items controls alignment along the cross axis (perpendicular to the main axis): stretch (default, items fill the cross axis), flex-start, flex-end, center, and baseline.
flex-wrap controls whether items wrap to new lines: nowrap (default, items may overflow), wrap (items wrap to new lines as needed), and wrap-reverse.
align-content controls how multiple flex lines are distributed on the cross axis when wrapping is enabled.
gap sets spacing between flex items without adding margins to individual items.
Item Properties
flex-grow controls how much an item grows relative to others when extra space is available. A value of 1 means the item takes an equal share of extra space. A value of 2 means it takes twice as much as an item with flex-grow: 1.
flex-shrink controls how much an item shrinks relative to others when there is not enough space. The default is 1.
flex-basis sets the initial size of the item before growing or shrinking is applied. auto means the item uses its content size. A fixed value (like 200px) sets an explicit starting size.
The shorthand property flex: flex-grow flex-shrink flex-basis is the recommended way to set all three. flex: 1 is shorthand for flex: 1 1 0, meaning the item can grow and shrink equally and starts from a zero basis.
align-self overrides the container's align-items for a single item.
order changes the visual order of items without changing the HTML order. Items with lower order values appear first.
Using the DevHexLab Flexbox Playground
Open the tool at /tools/css/flexbox-playground. Toggle container properties and item properties using the controls. The layout updates live so you can experiment freely. Copy the CSS when you have the layout you need.
Frequently Asked Questions
When should I use Flexbox vs CSS Grid?
Flexbox is one-dimensional: it arranges items in a single row or column. Grid is two-dimensional: it arranges items in rows and columns simultaneously. Use Flexbox for navigation bars, card rows, button groups, and any layout that is primarily linear. Use Grid for page layouts, complex card grids, and any layout that needs precise two-dimensional control.
Why does flex: 1 not divide space equally?
If items have different content sizes, flex: 1 distributes the available space equally but the final sizes are not equal because each item starts from its content size (flex-basis: auto by default). Use flex: 1 1 0 (or the shorthand flex: 1 with flex-basis explicitly set to 0) to make all items start from the same baseline.
Learn Flexbox once and you can build virtually any one-dimensional layout.