Flexbox is a one-dimensional layout model — it arranges items in a single row or column, and makes spacing, alignment, and reordering them far easier than the older float-based layout in earlier lessons.
Set display: flex on a parent element to turn its direct children into flex items.
.container {
display: flex;
}Controls whether items lay out in a row or a column.
.container {
flex-direction: row; /* default — left to right */
flex-direction: row-reverse;
flex-direction: column; /* top to bottom */
flex-direction: column-reverse;
}Aligns items along the main axis (horizontally, for a row).
.container {
justify-content: flex-start; /* default */
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}Aligns items along the cross axis (vertically, for a row).
.container {
align-items: stretch; /* default — fills the container height */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
}Items shrink to fit on one line by default. flex-wrap: wrap lets them wrap onto multiple lines instead.
.container {
flex-wrap: nowrap; /* default */
flex-wrap: wrap;
}Adds space between flex items, without needing margin on each individual item.
.container {
display: flex;
gap: 16px;
}| Property | What it does |
|---|---|
| flex-grow | How much an item grows to fill extra space, relative to other items (default 0) |
| flex-shrink | How much an item shrinks when there isn't enough space (default 1) |
| flex-basis | The item's starting size before growing or shrinking (default auto) |
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
/* often written as shorthand: */
flex: 1 1 200px;
}align-self overrides align-items for one specific item. order changes the visual order of items without touching the HTML.
.item-featured {
align-self: center;
order: -1; /* moves this item first */
}Practice it interactively
This site's Flexbox Playground tool (under Tools) lets you drag values for every property on this page and see the layout update live — a faster way to build intuition than reading code alone.