Layouts

Flex

Flex Direction

Control the direction of flex items:

.flex-column - Sets flex-direction to column
.flex-row - Sets flex-direction to row

Flex Wrap

Control how flex items wrap:

.flex-wrap - Allows flex items to wrap

Flex Grow

Control how flex items grow to fill available space:

.flex-grow-0 - Prevents flex item from growing
.flex-grow-1 - Allows flex item to grow (1x)
.flex-grow-2 - Allows flex item to grow (2x)
.flex-grow-3 - Allows flex item to grow (3x)
.flex-grow-4 - Allows flex item to grow (4x)
.flex-grow-5 - Allows flex item to grow (5x)

Flex Shrink

Control how flex items shrink when space is limited:

.flex-shrink-0 - Prevents flex item from shrinking
.flex-shrink-1 - Allows flex item to shrink (1x)
.flex-shrink-2 - Allows flex item to shrink (2x)
.flex-shrink-3 - Allows flex item to shrink (3x)
.flex-shrink-4 - Allows flex item to shrink (4x)
.flex-shrink-5 - Allows flex item to shrink (5x)

Gap

You can use the gap utility to control the spacing between elements in all our layouts.

.gap-none

.gap-2xs

.gap-xs

.gap-sm

.gap-md

.gap-lg

.gap-xl

.gap-2xl

.gap-3xl

.gap-4xl

.gap-5xl

.gap-6xl

.gap-7xl

.gap-8xl

.gap-9xl

.gap-10xl

.gap-11xl

.gap-12xl

.gap-13xl

.gap-14xl

.gap-15xl

.gap-16xl

.gap-17xl

.gap-18xl

Column / Row Gap

Additionally you can set column and row gap separately using .col-gap-[size] or .row-gap-[size].

Tokens

You can find the spacing tokens in the tokens reference.

Alignment

Align Content

Control how lines are distributed in a multi-line flex container:

.align-content-space-around - Distributes lines with space around them
.align-content-space-between - Distributes lines with space between them
.align-content-space-evenly - Distributes lines with equal space around them
.align-content-baseline - Aligns lines to their baseline
.align-content-stretch - Stretches lines to fill the container
.align-content-start - Aligns lines to the start
.align-content-center - Centers lines in the container
.align-content-end - Aligns lines to the end

Align Items

Control how flex items are aligned along the cross axis:

.align-items-baseline - Aligns items to their baseline
.align-items-stretch - Stretches items to fill the container
.align-items-start - Aligns items to the start
.align-items-center - Centers items along the cross axis
.align-items-end - Aligns items to the end

Align Self

Control how an individual flex item is aligned along the cross axis:

.align-self-baseline - Aligns the item to its baseline
.align-self-stretch - Stretches the item to fill the container
.align-self-start - Aligns the item to the start
.align-self-center - Centers the item along the cross axis
.align-self-end - Aligns the item to the end

Justify Content

Control how flex items are distributed along the main axis:

.justify-content-space-around - Justifies content with space around them
.justify-content-space-between - Justifies content with space between them
.justify-content-space-evenly - Justifies items with equal space around them
.justify-content-start - Justifies content to the start
.justify-content-center - Justifies content in the center
.justify-content-end - Justifies content to the end

Justify Items

.justify-items-baseline - Aligns the item to its baseline
.justify-items-stretch - Stretches the item to fill the container
.justify-items-start - Justifies items to the start
.justify-items-center - Justifies items in the center
.justify-items-end - Justifies items to the end

Justify Self

.justify-self-baseline - Justifies the item to its baseline
.justify-self-stretch - Stretches the item to fill the container
.justify-self-start - Justifies the item to the start
.justify-self-center - Justifies the item in the center
.justify-self-end - Justifies the item to the end