flex

Setting how flex items grow or shrink.

Overview

Examples

Let an item fill remaining space

Use flex:1 on a flex item that should grow and shrink to take the available space.

<div class="flex gap:md">    <aside class="w:24x flex:0">...</aside>    <main class="flex:1 min-w:0">...</main></div>

@layer utilities {    .flex {        display: flex    }    .flex\:0 {        flex: 0    }    .flex\:1 {        flex: 1    }    .min-w\:0 {        min-width: 0    }    .w\:24x {        width: 6rem    }}

Prevent an item from flexing

Use flex:0 for icons, fixed media, and side controls that should keep their measured size while siblings flex around them.

<div class="flex items-center gap:sm">    <img class="size:10x flex:0" src="..." alt="" />    <span class="min-w:0">Profile details</span></div>

Set grow, shrink, and basis together

The flex property is shorthand for flex-grow, flex-shrink, and flex-basis. Use pipe separators when you need to pass multiple CSS values.

<aside class="flex:0|0|18x">    ...</aside>

Reach for flex-grow, flex-shrink, or flex-basis when only one part of the shorthand should change.

Remember the parent display

flex:* affects a flex item. The parent still needs flex, inline-flex, or another layout mode that makes the child participate in flex sizing.

<section class="flex">    <div class="flex:1">...</div></section>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="flex:0 flex:1@sm flex:0@print">...</div>

For text-heavy flex children, pair flexible sizing with min-w:0 so long content can shrink.