Utilities
Flexbox
Direction, wrapping, grow, shrink, basis and order for flex layouts.
58classes
297variant classes
7properties
Live example
<div class="space-y-3">
<div class="flex items-center justify-between gap-3 rounded-xl border bg-surface p-3">
<div class="size-10 rounded-lg bg-primary"></div>
<div class="flex-1 h-3 rounded-full bg-muted"></div>
<div class="size-10 rounded-lg bg-accent"></div>
</div>
<div class="flex flex-wrap gap-2">
<span class="rounded-full bg-secondary text-secondary-foreground px-3 py-1 text-sm">flex-wrap</span>
<span class="rounded-full bg-secondary text-secondary-foreground px-3 py-1 text-sm">gap-2</span>
<span class="order-first rounded-full bg-primary text-primary-foreground px-3 py-1 text-sm">order-first</span>
<span class="rounded-full bg-secondary text-secondary-foreground px-3 py-1 text-sm">items wrap onto new lines</span>
</div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example md:flex-row. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | not generated | 0 |
| Group and peer | not generated | 0 |
| Structure | not generated | 0 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | sm:md:lg:xl:2xl: | 39 |
| Containers | @xs:@sm:@md:@lg:@xl: | 4 |
| Media and direction | print:screen:rtl:ltr: | 39 |
Flex direction 4
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
flex-row | flex-direction: row; | rtl ltr sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
flex-row-reverse | flex-direction: row-reverse; | rtl ltr sm md lg xl 2xl print screen |
flex-col | flex-direction: column; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
flex-col-reverse | flex-direction: column-reverse; | sm md lg xl 2xl print screen |
Flex wrap 3
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
flex-wrap | flex-wrap: wrap; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
flex-wrap-reverse | flex-wrap: wrap-reverse; | |
flex-nowrap | flex-wrap: nowrap; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
Flex 4
Variants: sm:md:lg:xl:2xl:print:screen:
| Class | CSS |
|---|---|
flex-1 | flex: 1 1 0%; |
flex-auto | flex: 1 1 auto; |
flex-initial | flex: 0 1 auto; |
flex-none | flex: none; |
Flex grow 2
Variants: none
| Class | CSS |
|---|---|
grow | flex-grow: 1; |
grow-0 | flex-grow: 0; |
Flex shrink 2
Variants: none
| Class | CSS |
|---|---|
shrink | flex-shrink: 1; |
shrink-0 | flex-shrink: 0; |
Flex basis 28
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
basis-0 | flex-basis: 0; | |
basis-1 | flex-basis: 0.25rem; | |
basis-2 | flex-basis: 0.5rem; | |
basis-4 | flex-basis: 1rem; | |
basis-8 | flex-basis: 2rem; | |
basis-12 | flex-basis: 3rem; | |
basis-16 | flex-basis: 4rem; | |
basis-20 | flex-basis: 5rem; | |
basis-24 | flex-basis: 6rem; | |
basis-32 | flex-basis: 8rem; | |
basis-40 | flex-basis: 10rem; | |
basis-48 | flex-basis: 12rem; | |
basis-64 | flex-basis: 16rem; | |
basis-px | flex-basis: 1px; | |
basis-auto | flex-basis: auto; | sm md lg xl 2xl print screen |
basis-full | flex-basis: 100%; | sm md lg xl 2xl print screen |
basis-1/2 | flex-basis: 50%; | sm md lg xl 2xl print screen |
basis-1/3 | flex-basis: 33.333333%; | sm md lg xl 2xl print screen |
basis-2/3 | flex-basis: 66.666667%; | sm md lg xl 2xl print screen |
basis-1/4 | flex-basis: 25%; | sm md lg xl 2xl print screen |
basis-2/4 | flex-basis: 50%; | sm md lg xl 2xl print screen |
basis-3/4 | flex-basis: 75%; | sm md lg xl 2xl print screen |
basis-1/5 | flex-basis: 20%; | sm md lg xl 2xl print screen |
basis-2/5 | flex-basis: 40%; | sm md lg xl 2xl print screen |
basis-3/5 | flex-basis: 60%; | sm md lg xl 2xl print screen |
basis-4/5 | flex-basis: 80%; | sm md lg xl 2xl print screen |
basis-1/6 | flex-basis: 16.666667%; | sm md lg xl 2xl print screen |
basis-5/6 | flex-basis: 83.333333%; | sm md lg xl 2xl print screen |
Order 15
Variants: sm:md:lg:xl:2xl:print:screen:
| Class | CSS |
|---|---|
order-1 | order: 1; |
order-2 | order: 2; |
order-3 | order: 3; |
order-4 | order: 4; |
order-5 | order: 5; |
order-6 | order: 6; |
order-7 | order: 7; |
order-8 | order: 8; |
order-9 | order: 9; |
order-10 | order: 10; |
order-11 | order: 11; |
order-12 | order: 12; |
order-first | order: -9999; |
order-last | order: 9999; |
order-none | order: 0; |