Flex Basis

Utilities for defining the flex-basis property to control the initial size of flex items.

Class Name	CSS Equivalent
basis-auto	flex-basis: auto;
basis-full	flex-basis: 100%;
basis-none	flex-basis: 0;
basis-0	flex-basis: 0;
basis-1/2	flex-basis: 50%;
basis-1/3	flex-basis: 33.3333333333%;
basis-2/3	flex-basis: 66.6666666667%;
basis-1/4	flex-basis: 25%;
basis-2/4	flex-basis: 50%;
basis-3/4	flex-basis: 75%;
basis-1/5	flex-basis: 20%;
basis-2/5	flex-basis: 40%;
basis-3/5	flex-basis: 60%;
basis-4/5	flex-basis: 80%;
basis-1/6	flex-basis: 16.6666666667%;
basis-2/6	flex-basis: 33.3333333333%;
basis-3/6	flex-basis: 50%;
basis-4/6	flex-basis: 66.6666666667%;
basis-5/6	flex-basis: 83.3333333333%;
basis-1/12	flex-basis: 8.3333333333%;
basis-2/12	flex-basis: 16.6666666667%;
basis-3/12	flex-basis: 25%;
basis-4/12	flex-basis: 33.3333333333%;
basis-5/12	flex-basis: 41.6666666667%;
basis-6/12	flex-basis: 50%;
basis-7/12	flex-basis: 58.3333333333%;
basis-8/12	flex-basis: 66.6666666667%;
basis-9/12	flex-basis: 75%;
basis-10/12	flex-basis: 83.3333333333%;
basis-11/12	flex-basis: 91.6666666667%;

Setting the flex basis

Use the basis-{size} utilities to set the initial size of flex items.

<div class="flex flex-row gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...] basis-1/6">2</div>
  <div class="[...] basis-1/2">3</div>
</div>

1

2

3