Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

Flexbox

Use the flexbox utility classes to control various flexbox properties. These are especially useful when combined with layout grid classes.

For these utility classes to work, first create a flex container you can use the .ds-u-display--flex utility class then apply these utility classes to the container's direct children elements.

Flex direction

Use the flex-direction utility class on a flexbox container to change the alignment of its child elements on the main axis (x-axis by default).

The CSS flex-direction property defines how the browser distributes space between and around content items along the main axis of their container. MDN

Format: .ds-u-flex-direction--[row|column|row-reverse|column-reverse]

Responsive format: .ds-u-[breakpoint]-flex-direction--[row|column|row-reverse|column-reverse]

.ds-u-flex-direction--row
Element #1
Element #2
Element #3
.ds-u-flex-direction--column
Element #1
Element #2
Element #3
.ds-u-flex-direction--row-reverse>
Element #1
Element #2
Element #3
.ds-u-flex-direction--column-reverse
Element #1
Element #2
Element #3

Justify content

Use the justify-content utility class on a flexbox container to change the alignment of its child elements on the main axis (x-axis by default).

The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container. MDN

Format: .ds-u-justify-content--[start|end|center|between|around]

Responsive format: .ds-u-[breakpoint]-justify-content--[start|end|center|between|around]

.ds-u-justify-content--start>
start
start
start>
.ds-u-justify-content--end
end
end
end>
.ds-u-justify-content--center
center
center
center>
.ds-u-justify-content--between
between
between
between>
.ds-u-justify-content--around
around
around
around>

Align items

Use the align-items utility class on a flexbox container to change the alignment of its child elements on the cross axis (y-axis by default).

The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction. MDN

Format: .ds-u-align-items--[start|end|center|baseline|stretch]

Responsive format: .ds-u-[breakpoint]-align-items--[start|end|center|baseline|stretch]

.ds-u-align-items--start
start
start
start
.ds-u-align-items--end
end
end
end
.ds-u-align-items--center
center
center
center
.ds-u-align-items--baseline
baseline
baseline
baseline
.ds-u-align-items--stretch
stretch
stretch
stretch

Flex-wrap

Use the flex-wrap utility class on a flexbox container to change how its child elements wrap.

The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. MDN

Format: .ds-u-flex-wrap--[nowrap|wrap|reverse]

Responsive format: .ds-u-[breakpoint]-flex-wrap--[nowrap|wrap|reverse]

.ds-u-flex-wrap--nowrap
Element #1
Element #2
.ds-u-flex-wrap--wrap
Element #1
Element #2
.ds-u-flex-wrap--reverse
Element #1
Element #2

Responsive flexbox

Use a breakpoint prefix to change the flexbox at specific breakpoints.

Scale: 0.22