Use the flexbox

You are leaving design.cms.gov.

You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

Learn more about links to third-party sites.

ContinueCancel

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

You are leaving design.cms.gov.

You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

Learn more about links to third-party sites.

ContinueCancel

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

You are leaving design.cms.gov.

You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

Learn more about links to third-party sites.

ContinueCancel

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

You are leaving design.cms.gov.

You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

Learn more about links to third-party sites.

ContinueCancel

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

You are leaving design.cms.gov.

You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

Learn more about links to third-party sites.

ContinueCancel

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.