Skip to content
Laviyx Learn

Try

CSS course menu

Flex Items: flex-grow, flex-shrink, flex-basis, the flex Shorthand, order and align-self

Control how individual flex items size themselves: flex-grow to share free space, flex-shrink when space runs out, flex-basis as the starting size, the flex shorthand (flex: 1, flex: auto, flex: none), min-width: 0, order and align-self.

Intermediate6 min readUpdated
On this page

The container properties from the previous lesson decide where items go. The item properties decide how big each item is: whether it grows into free space, how much it shrinks when space runs out, and where it starts.

flex-basis: the starting size#

flex-basis is the item's size before free space is shared out. auto (the default) means "use my width, or my content size".

flex-grow: sharing free space#

If the items do not fill the container, flex-grow decides who gets the leftover space, in proportion to their values:

CSS
.row { display: flex; gap: 6px; margin-bottom: 8px; background: #eef3ff; padding: 6px; }
.row div { padding: 10px; background: #2f5fe0; color: white; font: 13px monospace; }
HTML
<div class="row"><div>0</div><div>0</div><div>0</div></div>
<div class="row"><div style="flex-grow: 1">1</div><div>0</div><div>0</div></div>
<div class="row"><div style="flex-grow: 1">1</div><div style="flex-grow: 2">2</div><div style="flex-grow: 1">1</div></div>
Result
  • Row 1: nobody grows (0 is the default); free space stays at the end.
  • Row 2: the first item takes all the free space.
  • Row 3: the free space is split 1 : 2 : 1. Note that it is the free space that is split, not the total width: items with more content still end up wider.

flex-shrink: when space runs out#

When items are too big for the container, flex-shrink decides who gives up space. The default is 1: every item shrinks. 0 means "never shrink":

CSS
.row { display: flex; gap: 6px; width: 300px; background: #fff3c4; padding: 6px; }
.row div { flex-basis: 150px; padding: 8px; background: #e8590c; color: white; font: 13px monospace; }
.row .fixed { flex-shrink: 0; }
HTML
<div class="row">
  <div class="fixed">no shrink</div>
  <div>shrinks</div>
  <div>shrinks</div>
</div>
Result

Three 150px items do not fit in 300px. The first keeps its 150px; the others shrink to make room. flex-shrink: 0 is common for icons and avatars that must keep their size.

The flex shorthand#

You will usually write all three at once with flex: grow shrink basis:

ShorthandMeansUse for
flex: 11 1 0%Items that share all the space equally
flex: auto1 1 autoItems that grow and shrink, starting from their content size
flex: none0 0 autoItems that keep their natural size
flex: 0 0 200pxfixed 200pxA fixed-width sidebar
flex: 1 1 250pxstart at 250px, then grow or shrinkCards in a wrapping row
CSS
.layout { display: flex; gap: 8px; }
.sidebar { flex: 0 0 120px; background: #c9f0d3; padding: 8px; }
.main { flex: 1; background: #cfe3ff; padding: 8px; }
HTML
<div class="layout">
  <aside class="sidebar">Sidebar: 120px</aside>
  <main class="main">Main: takes all remaining space</main>
</div>
Result

The min-width: 0 gotcha#

Flex items will not shrink below the width of their content by default (their min-width is auto). A long URL or a wide code block can therefore push a flex layout wider than the screen. The fix is min-width: 0 on the item:

CSS
.row { display: flex; gap: 6px; width: 280px; border: 1px solid #999; }
.row > div { flex: 1; padding: 6px; background: #f1f3f5; }
.fix { min-width: 0; overflow-wrap: anywhere; }
HTML
<div class="row"><div>Label</div><div>https://www.example.com/a-really-long-unbroken-address</div></div>
<br>
<div class="row"><div>Label</div><div class="fix">https://www.example.com/a-really-long-unbroken-address</div></div>
Result

In the first row, the long URL overflows the 280px container; in the second, min-width: 0 lets the item shrink and the URL wraps.

order#

order changes the visual order of items (default 0; lower values come first):

CSS
.featured { order: -1; }   /* show first */

align-self#

align-self overrides the container's align-items for one item:

CSS
.row { display: flex; align-items: flex-start; gap: 6px; height: 80px; background: #eef3ff; padding: 6px; }
.row div { padding: 8px; background: #2f5fe0; color: white; }
HTML
<div class="row">
  <div>start</div>
  <div style="align-self: center">center</div>
  <div style="align-self: flex-end">end</div>
</div>
Result

Practice#

Practice exercise

Build a chat message row: a 40px round avatar that never shrinks, a message bubble that takes the remaining space (and wraps long text), and a time label that keeps its natural size, aligned to the bottom of the row.

Show solution
CSS
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 360px; }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #9b5de5; }
.bubble { flex: 1; min-width: 0; padding: 8px 12px; background: #eef3ff; border-radius: 12px; overflow-wrap: anywhere; }
.time { flex: none; font-size: 12px; color: #777; }
HTML
<div class="msg">
  <div class="avatar"></div>
  <p class="bubble">Has anyone tried the new flexbox exercises? The last one took me a while!</p>
  <span class="time">10:42</span>
</div>
Result

Key takeaway#

Finished this lesson?

Related lessons

CSSCSS Flexbox: A Complete Beginner's Guide with ExamplesLearn CSS Flexbox with live examples: flex containers and items, flex-direction, main and cross axes, justify-content, align-items, flex-wrap, gap, align-content, and common layouts such as navbars, card rows and sticky footers.Intermediate7 min readCSSCSS Grid Layout: A Complete Beginner's Guide with ExamplesLearn CSS Grid with live examples: grid containers, grid-template-columns and rows, the fr unit, repeat(), gap, minmax(), auto-fit and auto-fill for responsive grids without media queries, spanning cells, and aligning grid items.Intermediate6 min readCSSResponsive Web Design: Fluid Layouts, Mobile First and Flexible ImagesLearn responsive web design: the viewport meta tag, fluid layouts with relative units, flexible images, mobile-first CSS, breakpoints chosen by content, intrinsic layouts with Grid and Flexbox, touch targets, and testing on real screen sizes.Intermediate7 min read