flex-basis

Setting the initial main size of a flex item.

Overview

Examples

Set the starting size of a flex item

Use flex-basis:* to set the initial main-axis size before grow and shrink are applied.

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

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

Use content or parent-sized basis values

Use flex-basis:full, flex-basis:fit, or flex-basis:max when the basis should follow a native sizing keyword.

<section class="flex-basis:full">...</section>

Use container basis values

Use flex-basis:* when flex item sizing should align with the shared container scale.

<aside class="flex-basis:md flex-shrink:0">...</aside>

Prefer shorthand for complete flex behavior

If the item needs grow, shrink, and basis at the same time, use flex.

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

Apply conditionally

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

<div class="flex-basis:full flex-basis:24x@sm flex-basis:auto@print">...</div>

The basis follows the flex direction: width in rows, height in columns.