Flex Grow, Shrink, Basis, Order and Align Self
What Is It?
Flex item properties control how each child shares space or handles a shortage. Item-specific alignment can override the container setting.
Properties, Tags and Attributes Explained
flex-grow: Distributes positive free space using growth factors.flex-shrink: Distributes negative free space using shrink factors weighted by flex base sizes.flex-basis: Sets the starting main size before space distribution.flex: Shorthand for grow, shrink, and basis; flex: 1 1 0 starts from a zero basis.align-self: Overrides cross-axis alignment for one item.order: Changes visual order; it does not change DOM or keyboard order.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Share extra space
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Grow, Shrink, Basis, Order and Align Self</title>
<style>
.demo > div { background: #dbeafe; padding: 12px; border: 1px solid #93c5fd; }
.demo { display: flex; gap: 8px; }
.demo > div { flex: 1 1 0; min-width: 0; }
.demo > div:nth-child(2) { flex-grow: 2; }
</style>
</head>
<body>
<div class="demo"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>What you see: The middle item receives twice the growth share from the same zero basis.
Example 2: Item alignment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Grow, Shrink, Basis, Order and Align Self</title>
<style>
.demo > div { background: #dbeafe; padding: 12px; border: 1px solid #93c5fd; }
.demo { display: flex; align-items: flex-start; height: 150px; gap: 8px; }
.demo > div:nth-child(2) { align-self: flex-end; }
</style>
</head>
<body>
<div class="demo"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>What you see: The middle item aligns to the bottom while the others stay at the top.
Example 3: Control shrinking
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Grow, Shrink, Basis, Order and Align Self</title>
<style>
.demo > div { background: #dbeafe; padding: 12px; border: 1px solid #93c5fd; }
.demo { display: flex; width: 240px; max-width: 100%; }
.demo > div { flex-basis: 100px; min-width: 0; }
.demo > div:first-child { flex-shrink: 0; }
</style>
</head>
<body>
<div class="demo"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>What you see: The first item keeps its basis; the remaining items shrink to absorb the shortage.
Example 4: Compare visual order with source order
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Grow, Shrink, Basis, Order and Align Self</title>
<style>
.row { display: flex; gap: 8px; }
span { padding: 12px; background: #dbeafe; }
.second { order: -1; }
</style>
</head>
<body>
<p>Source order: One, Two, Three.</p><div class="row"><span>One</span><span class="second">Two</span><span>Three</span></div>
</body>
</html>What you see: Two paints first because its order is -1, but the DOM order stays One, Two, Three. Use visual reordering only when it preserves a sensible reading and keyboard sequence.
When and Where to Use It
Use grow for a search field filling a toolbar, shrink control for an icon, and align-self for a single differently aligned item.
Common Mistake or Useful Tip
min-width: auto can stop flex items shrinking below their content size. min-width: 0 often helps with long text.
Try It Yourself
Give the third item flex-grow: 3 and compare the space shares.