The introductory flexbox lesson covered direction, justify-* and items-*. This lesson explains the properties that decide how much space each item takes — grow, shrink and basis — together with wrapping, ordering, per-item alignment and auto margins. After finishing it you will be able to build sidebars that never collapse, sticky footers, and rows that wrap gracefully without custom CSS.
The flex shorthand sets grow, shrink and basis at once. Tailwind exposes four presets that cover most cases:
| Class | CSS | Behaviour |
|---|---|---|
| flex-1 | flex: 1 1 0% | Grows and shrinks, ignores content size — equal columns |
| flex-auto | flex: 1 1 auto | Grows and shrinks, starts from content size |
| flex-initial | flex: 0 1 auto | Shrinks if needed but never grows (the default) |
| flex-none | flex: none | Fixed size, neither grows nor shrinks |
<div class="flex gap-4">
<div class="flex-1 bg-gray-100">Equal</div>
<div class="flex-1 bg-gray-100">Equal</div>
<button class="flex-none">Fixed</button>
</div>With unequal content, flex-1 still makes items equal, while flex-auto adds the leftover space on top of each item's natural width.
When the presets are not enough, set each property on its own:
<div class="flex gap-4">
<img class="size-12 shrink-0" src="avatar.jpg" alt="" />
<p class="min-w-0 grow truncate">A long name that truncates instead of pushing the icon</p>
<span class="basis-24 text-right">12:30</span>
</div>grow / grow-0 toggle flex-grow; larger values such as grow-2 are valid for proportional growth.shrink-0 is the most important one: it stops icons, avatars and buttons being squashed when the row is tight.basis-* accepts the spacing scale, fractions (basis-1/3), basis-auto and basis-full, and is the value to change at breakpoints instead of width.min-w-0 appears again because a flex item's minimum width is its content width by default, which blocks both shrinking and truncate.
By default a flex container refuses to wrap and instead shrinks its items. flex-wrap allows items to flow onto new lines, and gap-* keeps consistent spacing between rows as well as columns:
<ul class="flex flex-wrap gap-2">
<li class="rounded-full bg-gray-100 px-3 py-1">Design</li>
<li class="rounded-full bg-gray-100 px-3 py-1">Engineering</li>
<li class="rounded-full bg-gray-100 px-3 py-1">Marketing</li>
</ul>Combined with basis-* this gives a responsive card grid without media queries: flex flex-wrap gap-6 on the container and basis-72 grow on each card lets the browser fit as many cards per row as space allows. content-* (align-content) distributes the wrapped lines themselves.
Visual order can differ from source order, which is useful when the DOM order must stay logical for screen readers and keyboard users:
<div class="flex flex-col md:flex-row">
<main class="order-2 md:order-1">Main content (first in the DOM)</main>
<aside class="order-1 md:order-2">Promo banner shown first on mobile</aside>
</div>order-first, order-last, order-none and order-1 through order-12 are available. Use ordering sparingly — it changes visuals only, never focus order.
self-* overrides the container's items-* for one item: self-start, self-center, self-end and self-stretch, for example a "Delete" button that should sit at the top of a tall card while its siblings are centred.
Finally, inside a flex container margin: auto absorbs all free space in that direction. ms-auto on the last link of a navbar pushes it to the far end, and mt-auto on a footer inside a flex-col min-h-dvh wrapper produces a sticky footer, as in the sample code above.
shrink-0 on icons, so they become ovals when the text beside them is long.w-64 on a sidebar instead of basis-64 shrink-0; a bare width still shrinks under pressure.justify-between on a row that wraps; the last line gets an awkward gap. Use gap-* with flex-wrap.Which class makes two columns exactly equal in width regardless of their content?
flex-1 gives equal columns, flex-auto shares space based on content, flex-none fixes an item's size.grow, shrink-0 and basis-* individually for precise control; basis-* is what you change at breakpoints.flex-wrap plus gap-* and basis-* produces responsive grids without media queries.order-* changes visual order only, and self-* overrides alignment for a single item.ms-auto and mt-auto push an item to the far end of the container.Next lesson: CSS Grid with Tailwind — define columns and rows with grid-cols-*, gap-* and col-span-*.