Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Fall updates Formation deprecation nearing completion!

Foundation

Flexbox

The flexbox utilities provide all of the properties for flex containers and some for flex items. All are responsive. Read about responsive prefixes. This utility can serve as compliment to the flexbox grid.

Flexbox requires two components, a flex container and flex items. Any first siblings in a flex container becomes a flex item. It is not possible for any of those siblings to not become a flex item.

Flex

The shorthand property, flex encompasses three properties: flex-grow, flex-shrink, and flex-basis, respectively. There are several options for creating ratios for flex items. However, these ratios are imprecise, so should not be used if specific widths are desired.

Flex

CSS property: flex

vads-u-flex--1
vads-u-flex--1
vads-u-flex--1
vads-u-flex--1
vads-u-flex--2
vads-u-flex--1
vads-u-flex--1
vads-u-flex--1
vads-u-flex--3
vads-u-flex--1
vads-u-flex--1
vads-u-flex--1
vads-u-flex--4
vads-u-flex--1
vads-u-flex--1
vads-u-flex--1
vads-u-flex--fill
vads-u-flex--1
vads-u-flex--1
vads-u-flex--1
vads-u-flex--auto
vads-u-flex--1
<div class="vads-u-display--flex">
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
</div>

<div class="vads-u-display--flex vads-u-margin-y--1">
  <div class="vads-u-flex--2 site-grid-example">vads-u-flex--2</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
</div>

<div class="vads-u-display--flex vads-u-margin-y--1">
  <div class="vads-u-flex--3 site-grid-example">vads-u-flex--3</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
</div>

<div class="vads-u-display--flex vads-u-margin-y--1">
  <div class="vads-u-flex--4 site-grid-example">vads-u-flex--4</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
</div>

<div class="vads-u-display--flex vads-u-margin-y--1">
  <div class="vads-u-flex--fill site-grid-example">vads-u-flex--fill</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
</div>

<div class="vads-u-display--flex vads-u-margin-y--1">
  <div class="vads-u-flex--auto site-grid-example">vads-u-flex--auto</div>
  <div class="vads-u-flex--1 site-grid-example">vads-u-flex--1</div>
</div>

Guidance

  • vads-u-flex--1 and vads-u-flex--fill can be used interchangably. Both of these will fill the space of the flex container with equal width boxes.
  • vads-u-flex--auto will make it’s element’s width equal to that of the content within it.

Flex direction

Flex direction sets the main-axis, which defines the direction flex items are placed in the flex container. Unless flex-wrap is set to wrap, flexbox is a single-direction layout concept, where flex items are primarily laying out either in horizontal rows or vertical columns.

Available values

  • row (default): left to right in ltr; right to left in rtl
  • row-reverse: right to left in ltr; left to right in rtl
  • column: same as row but top to bottom
  • column-reverse: same as row-reverse but bottom to top

Flex direction

CSS property: flex-direction

Column

1
2
3
4

Row

1
2
3
4

Column-reverse

1
2
3
4

Row-reverse

1
2
3
4
<p><strong>Column</strong></p>
<div class="vads-u-display--flex vads-u-flex-direction--column">
  <div class="vads-u-flex--1 site-grid-example">1</div>
  <div class="vads-u-flex--1 site-grid-example">2</div>
  <div class="vads-u-flex--1 site-grid-example">3</div>
  <div class="vads-u-flex--1 site-grid-example">4</div>
</div>

<p><strong>Row</strong></p>
<div class="vads-u-display--flex vads-u-flex-direction--row">
  <div class="vads-u-flex--1 site-grid-example">1</div>
  <div class="vads-u-flex--1 site-grid-example">2</div>
  <div class="vads-u-flex--1 site-grid-example">3</div>
  <div class="vads-u-flex--1 site-grid-example">4</div>
</div>

<p><strong>Column-reverse</strong></p>
<div class="vads-u-display--flex vads-u-flex-direction--column-reverse">
  <div class="vads-u-flex--1 site-grid-example">1</div>
  <div class="vads-u-flex--1 site-grid-example">2</div>
  <div class="vads-u-flex--1 site-grid-example">3</div>
  <div class="vads-u-flex--1 site-grid-example">4</div>
</div>

<p><strong>Row-reverse</strong></p>
<div class="vads-u-display--flex vads-u-flex-direction--row-reverse">
  <div class="vads-u-flex--1 site-grid-example">1</div>
  <div class="vads-u-flex--1 site-grid-example">2</div>
  <div class="vads-u-flex--1 site-grid-example">3</div>
  <div class="vads-u-flex--1 site-grid-example">4</div>
</div>

Flex wrap

The Flexbox grid is set to wrap by default, but flexbox will otherwise place flex items into a single row. Note: If the number of grid columns exceeds 12 and the grid column is set to nowrap, the grid columns may extend off the page.

Flex wrap

CSS property: flex-wrap

Nowrap

1
2
3
4
5

Wrap

1
2
3
4
5

Wrap-reverse

1
2
3
4
5
<p><strong>Nowrap</strong></p>
<div class="vads-l-row vads-u-flex-wrap--nowrap">
  <div class="vads-l-col--3 site-grid-example">1</div>
  <div class="vads-l-col--3 site-grid-example">2</div>
  <div class="vads-l-col--3 site-grid-example">3</div>
  <div class="vads-l-col--3 site-grid-example">4</div>
  <div class="vads-l-col--3 site-grid-example">5</div>
</div>

<p><strong>Wrap</strong></p>
<div class="vads-l-row vads-u-flex-wrap--wrap">
  <div class="vads-l-col--3 site-grid-example">1</div>
  <div class="vads-l-col--3 site-grid-example">2</div>
  <div class="vads-l-col--3 site-grid-example">3</div>
  <div class="vads-l-col--3 site-grid-example">4</div>
  <div class="vads-l-col--3 site-grid-example">5</div>
</div>

<p><strong>Wrap-reverse</strong></p>
<div class="vads-l-row vads-u-flex-wrap--wrap-reverse">
  <div class="vads-l-col--3 site-grid-example">1</div>
  <div class="vads-l-col--3 site-grid-example">2</div>
  <div class="vads-l-col--3 site-grid-example">3</div>
  <div class="vads-l-col--3 site-grid-example">4</div>
  <div class="vads-l-col--3 site-grid-example">5</div>
</div>

Align items

This defines how flex items are arranged across the row.

Available values

  • stretch (default): flex items stretch to fill the container
  • flex-start: flex items are aligned across their top edge
  • flex-end: flex items are aligned across their bottom edge
  • center: flex items are centered across the row
  • baseline: flex items are aligned to their baseline

Align items

CSS property: align-items

Stretch

1

2

3

Flex-start

1

2

3

Flex-end

1

2

3

Center

1

2

3

Baseline

1

2

3

<p><strong>Stretch</strong></p>
<div class="vads-u-display--flex vads-u-align-items--stretch">
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--1">1</p></div>
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-top--0 vads-u-margin-bottom--5">2</p></div>
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--3">3</p></div>
</div>

<p><strong>Flex-start</strong></p>
<div class="vads-u-display--flex vads-u-align-items--flex-start">
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--1">1</p></div>
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--7">2</p></div>
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--3">3</p></div>
</div>

<p><strong>Flex-end</strong></p>
<div class="vads-u-display--flex vads-u-align-items--flex-end">
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--1">1</p></div>
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--7">2</p></div>
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--3">3</p></div>
</div>

<p><strong>Center</strong></p>
<div class="vads-u-display--flex vads-u-align-items--center">
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--1">1</p></div>
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-top--0 vads-u-margin-bottom--5">2</p></div>
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--3">3</p></div>
</div>

<p><strong>Baseline</strong></p>
<div class="vads-u-display--flex vads-u-align-items--baseline">
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--1">1</p></div>
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-top--0 vads-u-margin-bottom--5">2</p></div>
  <div class="vads-u-flex--1 site-grid-example"><p class="vads-u-margin-y--3">3</p></div>
</div>

Justify content

This property helps distribute space left over.

Available values

  • flex-start (default): flex items are organized from the start of the flex container
  • flex-end: flex items are organized at the end of the flex container
  • center: flex items are organized in the center of the flex container
  • space-between: the first flex item start of the flex container and the last item at the end of the flex container with all other flex items evenly distributed from the center.
  • space-around: flex items are evenly distributed across the row with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
  • space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Justify content

CSS property: justify-content

Flex start

1
2
3

Flex end

1
2
3

Center

1
2
3

Space between

1
2
3

Space around

1
2
3

Space evenly

1
2
3
<p><strong>Flex start</strong></p>
<div class="vads-l-row vads-u-justify-content--flex-start">
  <div class="vads-l-col--2 site-grid-example">1</div>
  <div class="vads-l-col--2 site-grid-example">2</div>
  <div class="vads-l-col--2 site-grid-example">3</div>
</div>

<p><strong>Flex end</strong></p>
<div class="vads-l-row vads-u-justify-content--flex-end">
  <div class="vads-l-col--2 site-grid-example">1</div>
  <div class="vads-l-col--2 site-grid-example">2</div>
  <div class="vads-l-col--2 site-grid-example">3</div>
</div>

<p><strong>Center</strong></p>
<div class="vads-l-row vads-u-justify-content--center">
  <div class="vads-l-col--2 site-grid-example">1</div>
  <div class="vads-l-col--2 site-grid-example">2</div>
  <div class="vads-l-col--2 site-grid-example">3</div>
</div>

<p><strong>Space between</strong></p>
<div class="vads-l-row vads-u-justify-content--space-between">
  <div class="vads-l-col--2 site-grid-example">1</div>
  <div class="vads-l-col--2 site-grid-example">2</div>
  <div class="vads-l-col--2 site-grid-example">3</div>
</div>

<p><strong>Space around</strong></p>
<div class="vads-l-row vads-u-justify-content--space-around">
  <div class="vads-l-col--2 site-grid-example">1</div>
  <div class="vads-l-col--2 site-grid-example">2</div>
  <div class="vads-l-col--2 site-grid-example">3</div>
</div>

<p><strong>Space evenly</strong></p>
<div class="vads-l-row vads-u-justify-content--space-evenly">
  <div class="vads-l-col--2 site-grid-example">1</div>
  <div class="vads-l-col--2 site-grid-example">2</div>
  <div class="vads-l-col--2 site-grid-example">3</div>
</div>

Align content

This utility handles a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Available values

  • flex-start: flex items are organized from start of the flex container
  • flex-end: flex items are organized at end of the flex container
  • center: flex items are organized in the center of the flex container
  • space-between: first line of flex items is at the start of the flex container, the last line is at the end of the flex container, with all other lines distributed in between from the center.
  • space-around: flex items are distributed evenly along a horizontal axis
  • stretch (default): flex items stretch to take up remaining space.

Align content

CSS property: align-content

Flex start

1
2
3
4

Flex end

1
2
3
4

Center

1
2
3
4

Space between

1
2
3
4

Space around

1
2
3
4

Stretch

1
2
3
4
<p><strong>Flex start</strong></p>
<div class="vads-l-row vads-u-align-content--flex-start" style="height:200px; border:1px solid">
  <div class="vads-l-col--4 site-grid-example">1</div>
  <div class="vads-l-col--4 site-grid-example">2</div>
  <div class="vads-l-col--4 site-grid-example">3</div>
  <div class="vads-l-col--4 site-grid-example">4</div>
</div>

<p><strong>Flex end</strong></p>
<div class="vads-l-row vads-u-align-content--flex-end" style="height:200px; border:1px solid">
  <div class="vads-l-col--4 site-grid-example">1</div>
  <div class="vads-l-col--4 site-grid-example">2</div>
  <div class="vads-l-col--4 site-grid-example">3</div>
  <div class="vads-l-col--4 site-grid-example">4</div>
</div>

<p><strong>Center</strong></p>
<div class="vads-l-row vads-u-align-content--center" style="height:200px; border:1px solid">
  <div class="vads-l-col--4 site-grid-example">1</div>
  <div class="vads-l-col--4 site-grid-example">2</div>
  <div class="vads-l-col--4 site-grid-example">3</div>
  <div class="vads-l-col--4 site-grid-example">4</div>
</div>

<p><strong>Space between</strong></p>
<div class="vads-l-row vads-u-align-content--space-between" style="height:200px; border:1px solid">
  <div class="vads-l-col--4 site-grid-example">1</div>
  <div class="vads-l-col--4 site-grid-example">2</div>
  <div class="vads-l-col--4 site-grid-example">3</div>
  <div class="vads-l-col--4 site-grid-example">4</div>
</div>

<p><strong>Space around</strong></p>
<div class="vads-l-row vads-u-align-content--space-around" style="height:200px; border:1px solid">
  <div class="vads-l-col--4 site-grid-example">1</div>
  <div class="vads-l-col--4 site-grid-example">2</div>
  <div class="vads-l-col--4 site-grid-example">3</div>
  <div class="vads-l-col--4 site-grid-example">4</div>
</div>

<p><strong>Stretch</strong></p>
<div class="vads-l-row vads-u-align-content--stretch" style="height:200px; border:1px solid">
  <div class="vads-l-col--4 site-grid-example">1</div>
  <div class="vads-l-col--4 site-grid-example">2</div>
  <div class="vads-l-col--4 site-grid-example">3</div>
  <div class="vads-l-col--4 site-grid-example">4</div>
</div>

Order

By default, flex items are laid out in the source order. The order property controls the order in which flex items appear regardless of the source order.

This utility provides ordering for 1 thru 4 in addition to initial, first, and last.

Order

CSS property: order

1
vads-u-order--3
2
vads-u-order--first
3
vads-u-order--last
4
vads-u-order--4
5
vads-u-order--1
6
vads-u-order--2
7
vads-u-order--initial
<div class="vads-l-row">
  <div class="vads-l-col--6 medium-screen:vads-l-col--2 vads-u-order--3 site-grid-example">1 <br> <code>vads-u-order--3</code></div>
  <div class="vads-l-col--6 medium-screen:vads-l-col--2 vads-u-order--first site-grid-example">2 <br> <code>vads-u-order--first</code></div>
  <div class="vads-l-col--6 medium-screen:vads-l-col--2 vads-u-order--last site-grid-example">3 <br> <code>vads-u-order--last</code></div>
  <div class="vads-l-col--6 medium-screen:vads-l-col--2 vads-u-order--4 site-grid-example">4 <br> <code>vads-u-order--4</code></div>
  <div class="vads-l-col--6 medium-screen:vads-l-col--2 vads-u-order--1 site-grid-example">5 <br> <code>vads-u-order--1</code></div>
  <div class="vads-l-col--6 medium-screen:vads-l-col--2 vads-u-order--2 site-grid-example">6 <br> <code>vads-u-order--2</code></div>
  <div class="vads-l-col--6 medium-screen:vads-l-col--2 vads-u-order--initial site-grid-example">7 <br> <code>vads-u-order--initial</code></div>
</div>

Responsive prefixes

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.

Example

<div class="vads-u-justify-content--center large-screen:vads-u-justify-content--space-between">
VADS Breakpoint Sass Variable USWDS Breakpoint Custom Property Width
$xsmall-screen --mobile 320px
$small-screen --mobile-lg 481px
-- --tablet 640px
$medium-screen --medium-screen 768px
$small-desktop-screen --desktop 1024px
$large-screen --desktop-lg 1201px

Read more about breakpoints.

Edit this page in GitHub (Permissions required)
Last updated: Apr 29, 2022