CSS Flex Items

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>