CSS Flex Items
In this page:
order
The order property changes an item's visual position without touching the HTML — items default to order: 0 and are sorted ascending, so a lower number moves an item earlier and a higher number moves it later, even ties break by source order. It only affects paint order, not tab/reading order for accessibility, so use it sparingly for purely visual rearrangement.
Example: order
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
gap: 8px;
}
.first {
order: 2;
background: coral;
color: white;
padding: 10px;
}
.second {
order: 1;
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="first">Coded first, shown second</div>
<div class="second">Coded second, shown first</div>
</div>flex-grow
flex-grow sets how much of the container's leftover space an item claims relative to its siblings — flex-grow: 2 on one item claims twice as much extra space as a sibling set to 1, while the default 0 means an item never grows beyond its content size. It only kicks in when there is leftover space to distribute at all.
Example: flex-grow
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
gap: 8px;
}
.a {
flex-grow: 2;
background: coral;
color: white;
padding: 10px;
}
.b {
flex-grow: 1;
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="a">Grows 2x</div>
<div class="b">Grows 1x</div>
</div>flex-shrink
flex-shrink is the mirror of flex-grow: it controls how much an item shrinks when the container is too small to fit everyone at their natural size. The default is 1 (all items shrink proportionally); setting flex-shrink: 0 on an item pins it at its flex-basis size and forces its siblings to absorb the overflow instead.
Example: flex-shrink
<style>
.container {
display: flex;
width: 200px;
background: #eef;
padding: 10px;
gap: 8px;
}
.pinned {
flex-shrink: 0;
width: 150px;
background: coral;
color: white;
padding: 10px;
}
.shrinks {
width: 150px;
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="pinned">Pinned size</div>
<div class="shrinks">Shrinks to fit</div>
</div>flex-basis and the flex shorthand
flex-basis sets an item's starting size before grow/shrink calculations happen — think of it as a more flexible width. The three values are almost always written together as the flex shorthand (flex: grow shrink basis), and the common shortcut flex: 1 expands to flex: 1 1 0%, meaning "grow and shrink freely from a zero starting point."
Example: flex-basis and the flex shorthand
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
gap: 8px;
}
.item {
flex: 1;
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="item">flex: 1 grows and shrinks from a 0% basis</div>
<div class="item">Equal item</div>
</div>align-self
align-self overrides the container's align-items value for one specific item, accepting the same values (center, flex-start, flex-end, stretch, baseline). It's the one item-level property that reaches back into cross-axis alignment rather than main-axis sizing, useful when a single item — like a "Skip" link — needs different vertical alignment than its siblings.
Example: align-self
<style>
.container {
display: flex;
align-items: flex-start;
height: 150px;
background: #eef;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
.skip {
align-self: flex-end;
background: coral;
}
</style>
<div class="container">
<div>Normal</div>
<div class="skip">Skip link, aligned differently</div>
</div>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: