Flexbox Basics
Lay out items in a row or column with flexbox.
Syntax
display: flex;Flexbox is a one-dimensional layout system for arranging items in a row or a column. You enable it by setting display: flex on a container.
The direct children become flex items and can be aligned, spaced, and reordered easily.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer sets display: flex on a navbar to place logo and links in a row without floats or inline-block hacks.
- A designer uses flexbox to vertically center a loading spinner inside a full-screen overlay with just two lines of CSS.
- A developer converts a vertically stacked form into a side-by-side label-input layout on larger screens by adding display: flex to each field row.
More examples
Basic flex row layout
Turns the nav into a flex container so its children align in a row and are vertically centered.
.nav {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
background: #1a1a2e;
}Vertical centering with flexbox
Centers a child element both horizontally and vertically inside a full-viewport container using justify-content and align-items.
.full-screen-loader {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgba(0,0,0,0.5);
}Flex card row with equal heights
Uses flex: 1 on cards so they share available space equally and stretch to the same height automatically.
.card-row {
display: flex;
gap: 24px;
}
.card {
flex: 1;
background: #fff;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
Discussion