CSS Flexbox
Flex Items
Once a parent is display:flex, its children become flex items. Item-level properties let each child decide how much space to take, how it shrinks, where it sits in the order, and how it aligns individually. These properties are where flexbox becomes genuinely flexible.
Item Properties at a Glance
| Property | What it does | Default |
|---|---|---|
| order | Reorders an item visually without changing the HTML | 0 |
| flex-grow | How much an item grows to fill extra space | 0 |
| flex-shrink | How much an item shrinks when space is tight | 1 |
| flex-basis | The item's starting size before growing/shrinking | auto |
| flex | Shorthand for grow, shrink and basis | 0 1 auto |
| align-self | Overrides align-items for a single item | auto |
flex-grow: Sharing Extra Space
flex-grow is a unitless proportion. If one item has flex-grow:2 and the others have 1, it receives twice the share of leftover space. In the example the middle box grows to fill the gap while the neighbours stay their natural size.
<!DOCTYPE html>
<html>
<head>
<style>
.row {
display: flex;
gap: 10px;
background: #f1f5f9;
padding: 10px;
font-family: sans-serif;
}
.item {
background: #8b5cf6; color: #fff; padding: 20px;
border-radius: 6px; text-align: center; font-weight: 700;
}
.grow { flex-grow: 1; background: #ef4444; }
</style>
</head>
<body>
<div class="row">
<div class="item">fixed</div>
<div class="item grow">flex-grow: 1</div>
<div class="item">fixed</div>
</div>
</body>
</html>flex-basis and flex-shrink
flex-basis sets an item's ideal size along the main axis before any growing or shrinking happens — think of it as the starting width (or height in a column). flex-shrink controls how readily an item gives up space when the container is too small: a value of 0 refuses to shrink.
.item {
flex-basis: 200px; /* preferred starting width */
flex-shrink: 0; /* never shrink below basis */
flex-grow: 1; /* but do grow to fill extra space */
}The flex Shorthand
You will almost always write these three together using the flex shorthand: flex: grow shrink basis. A few values come up so often they are worth memorising.
| Shorthand | Means | Behaviour |
|---|---|---|
| flex: 1 | 1 1 0 | Item grows and shrinks equally; equal-width columns |
| flex: auto | 1 1 auto | Grows/shrinks but respects content size |
| flex: none | 0 0 auto | Fixed size; never grows or shrinks |
| flex: 0 0 200px | explicit | Locked at 200px on the main axis |
<!DOCTYPE html>
<html>
<head>
<style>
.row {
display: flex;
gap: 10px;
background: #f1f5f9;
padding: 10px;
font-family: sans-serif;
}
.col {
flex: 1; /* every column shares space equally */
background: #10b981; color: #fff; padding: 22px;
border-radius: 6px; text-align: center; font-weight: 700;
}
.col.two { flex: 2; background: #0891b2; } /* twice as wide */
</style>
</head>
<body>
<div class="row">
<div class="col">flex: 1</div>
<div class="col two">flex: 2</div>
<div class="col">flex: 1</div>
</div>
</body>
</html>flex:1 on every child is the fastest way to build equal-width columns that automatically adapt to the container width.
order
order changes the visual position of an item without touching the HTML source. Items are laid out by ascending order value (default 0). A negative value pulls an item to the front.
<!DOCTYPE html>
<html>
<head>
<style>
.row {
display: flex; gap: 10px; background: #f1f5f9;
padding: 10px; font-family: sans-serif;
}
.box {
background: #f43f5e; color: #fff; padding: 20px;
border-radius: 6px; font-weight: 700; text-align: center;
}
.first { order: -1; background: #22c55e; }
.last { order: 1; background: #3b82f6; }
</style>
</head>
<body>
<div class="row">
<div class="box last">HTML: 3rd, order: 1</div>
<div class="box">HTML: middle, order: 0</div>
<div class="box first">HTML: last, order: -1</div>
</div>
</body>
</html>order only changes visual order, not the DOM order. Screen readers and keyboard tab order still follow the HTML source, so avoid reordering content in ways that confuse accessibility.
align-self
align-self lets a single item opt out of the container's align-items setting and position itself differently along the cross axis.
<!DOCTYPE html>
<html>
<head>
<style>
.row {
display: flex; align-items: flex-start; gap: 10px;
height: 160px; background: #f1f5f9; padding: 10px;
font-family: sans-serif;
}
.box {
background: #6366f1; color: #fff; padding: 16px;
border-radius: 6px; font-weight: 700;
}
.special { align-self: flex-end; background: #db2777; }
</style>
</head>
<body>
<div class="row">
<div class="box">top</div>
<div class="box special">bottom (align-self)</div>
<div class="box">top</div>
</div>
</body>
</html>Key Points
- flex-grow shares extra space; flex-shrink governs shrinking; flex-basis is the starting size.
- Prefer the flex shorthand: flex:1 for equal columns, flex:none for fixed items.
- order changes only the visual order, never the DOM or accessibility order.
- align-self overrides align-items for one individual item.
- flex-grow and flex-shrink take unitless proportions, not lengths.