Skip to main content
U.S. flag

An official website of the United States government

Winter updates Formation has been deprecated!

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

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

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

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

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

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

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

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