CSS Flexbox lays items out in one direction: a row or a column. Set display: flex on the parent. That parent is the flex container. Its direct children are the flex items.
The main axis is the line they follow. flex-direction: row is the default, so the line runs across the page. The cross axis runs the other way. Items can grow to share leftover space, or stay at the size of their content.
Flexbox is one axis. Grid is both.
A flex container handles a row, or a column. flex-wrap: wrap can start another line, and each line is laid out on its own. Rows and columns together are a job for CSS Grid.
Syntax
CSS Syntax
The container sets the axis. flex is written on the item:
CSS
.row {
display: flex; /* container; children are items */
flex-direction: row; /* main axis: across. This is the default */
gap: 10px;
}
.item {
flex: 1; /* flex-grow 1, flex-shrink 1, flex-basis 0 */
}
.stack {
display: flex;
flex-direction: column; /* main axis: down the page */
align-items: center; /* cross axis: center each item */
}
Reference
Core Ideas
The defaults a CSS Flexbox tutorial starts from:
Idea
Example
Remember
Container
display: flex
Direct children become flex items
Main axis
flex-direction: row
Default. Items start in one line
Cross axis
align-items: stretch
Default. Short items match the tallest
Free space
flex: 1
Equal share. Same as 1 1 0
Pack the row
justify-content: center
Moves items along the main axis
A column
flex-direction: column
The main axis now runs downward
Code
CSS Examples
Three flex containers. View Output shows the axis the browser uses.
Example 1 — Lay items in a row
display: flex puts the children on one row. The default align-items: stretch makes every item as tall as the tallest one.
CSS
.row {
display: flex;
gap: 10px;
}
/* items: One, Two, and a taller Three */
column makes the main axis run downward. One, then the wider item, then Three.
align-items now works left to right, because that is the cross axis.
center places each item in the middle of the row, at its own width.
Frequently Asked Questions
Flexbox lays out a parent’s direct children along one axis at a time: a row or a column. Set display: flex on the parent. That parent is the flex container. Each direct child is a flex item. The main axis is the direction they line up. The cross axis runs across that direction.
flex-direction is row, so items sit in one line from the start edge. flex-wrap is nowrap, so they stay on that line. flex-grow is 0, so they stay at their content size and the spare space sits after the last item. align-items is stretch, so a short item grows to the height of the tallest item on the cross axis.
flex: 1 is the shorthand for flex-grow: 1, flex-shrink: 1, and flex-basis: 0. Each item starts from zero and takes an equal share of the free space on the main axis. Three items with flex: 1 are the same width in a row.
justify-content packs items along the main axis. In a row, space-between puts the spare space between the items. align-items aligns them on the cross axis. stretch is the default. center lines them up in the middle of that axis.
No. Only the direct children of the flex container are flex items. A grandchild is laid out by its own parent. To lay it out with Flexbox, set display: flex on that parent too.
