flex
Control growth, shrinkage, and the starting size of a flex item.
Overview
| Class | Declarations |
|---|---|
flex:<value> | flex: <value>;
|
Examples
Let an item fill remaining space
flex:1 lets an item take the space left after fixed siblings and gaps. In this row, the sidebar keeps its 96px width and the main area expands. min-w:0 lets the main area shrink below its content’s automatic minimum width.
<div id="layout" class="flex gap-md"> <div id="peer" class="flex:none width:6rem height:6rem p-sm">Sidebar</div> <div id="target" class="flex:1 h:6rem min-w:0 p-sm">Flexible content</div></div>Generated CSS
@layer utilities { .flex { display: flex } .flex\:1 { flex: 1 } .flex\:none { flex: none } .min-w\:0 { min-width: 0 }}Prevent an item from flexing
Use flex:none to prevent both growth and shrinkage while keeping the item’s own width or height. The initials below keep a 48px square while the profile text takes the remaining space.
<div id="layout" class="flex items-center gap-md"> <span id="target" class="grid flex:none place-items:center width:3rem height:3rem" aria-hidden="true">AL</span> <div id="peer" class="flex:1 min-w:0 p-sm">Alex Lee<br>Product designer</div></div>flex:0 is different: browsers expand it to 0 1 0%, so it can shrink and does not retain a width as its basis. flex:none expands to 0 0 auto.
Set grow, shrink, and basis together
The shorthand sets flex-grow, flex-shrink, and flex-basis in that order. Pipe separators pass multiple values. Here flex:0|0|4.5rem gives the sidebar a 72px basis with no growth or shrinkage.
<div id="layout" class="flex gap-md"> <div id="target" class="flex:0|0|4.5rem h:6rem p-sm">Sidebar</div> <div id="peer" class="flex:1 h:6rem min-w:0 p-sm">Main content</div></div>Use flex-grow, flex-shrink, or flex-basis when only one component should change.
Remember the parent display
The shorthand affects a child only when it is a flex item. Compare these identical children: a block parent stacks them at their own widths; adding flex puts them in a row and lets flex:1 absorb the available space.
<div id="layout" class="block"> <div id="target" class="flex:1 width:6rem height:6rem min-w:0 p-sm">Target</div> <div id="peer" class="flex:none width:6rem height:6rem p-sm">Main content</div></div><div id="layout" class="flex gap-md"> <div id="target" class="flex:1 width:6rem height:6rem min-w:0 p-sm">Target</div> <div id="peer" class="flex:none width:6rem height:6rem p-sm">Main content</div></div>Apply conditionally
Use conditional queries to change flex behavior at a real viewport width. The blue item keeps a 96px width by default, then grows to fill the row from sm. Resize the preview to cross the breakpoint.
<div id="layout" class="flex gap-md"> <div id="target" class="flex:none width:6rem height:6rem min-w:0 p-sm flex:1@sm">Target</div> <div id="peer" class="flex:none width:6rem height:6rem p-sm">Main content</div></div>A long unbroken value may still need wrapping or truncation after min-w:0 allows the box to shrink.