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="flex:0 w:24x">...</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="flex:0 size:10x" 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:0@print flex:1@sm">...</div>

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