CSS Flexbox
Lay out items in a row with spacing and alignment.
On this page
The concept
display: flex turns an element into a flex container whose children sit in a row. gap sets the space between items, justify-content spreads them along the main axis, and align-items aligns them on the cross axis.
Code example
CSS
.row {
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: center;
}Follow the code
Open the walkthrough to inspect the example one step at a time.
Show guided walkthrough
Guided walkthroughReady
1
.row {2
display: flex;3
gap: 1rem;4
justify-content: space-between;5
align-items: center;6
}Follow the example
Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.
View the complete dry-run table
| Step / line | What happens | State after step | Output so far |
|---|---|---|---|
| Children are laid out in a row. | — | — | |
| A one rem gap sits between items. | — | — | |
| Extra space is placed between the items. | — | — | |
| Items are centered on the cross axis. | — | — |
Behind the scenes
How CSS processes this code
The browser matches selectors, computes styles, and paints the result. CSS does not produce console output.