Flexbox Glossary

There are a lot of great flexbox resources out there, but this one is tailored for use with flexbox utility classes in the Digital Campus Framework.

Adapted from this article on CSS Tricks by Becky Aiken.

Container Properties

Display

Here's our baseline: a group of divs in a container. Here's what it looks like before flexbox utility classes are applied.

HTML
<div class="dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">2</div>
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-d-flex

Applies flex layout to child elements of a div. Div goes full width of its container.

HTML
<div class="dcf-d-flex dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-d-inline-flex

Applies flex layout to child elements of a div, but the wrapping div shrinks to fit its content.

HTML
<div class="dcf-d-inline-flex dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

Direction

dcf-flex-row

This is the default.

HTML
<div class="dcf-d-flex dcf-flex-row dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-flex-row-rev

HTML
<div class="dcf-d-flex dcf-flex-row-rev dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-flex-col

HTML
<div class="dcf-d-flex dcf-flex-col dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-flex-col-rev

HTML
<div class="dcf-d-flex dcf-flex-col-rev dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

Wrap

We need a few more child divs for this demonstration!

dcf-flex-nowrap

This is the default.

HTML
<div class="dcf-d-flex dcf-flex-nowrap dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">15</div>
</div>
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

dcf-flex-wrap

HTML
<div class="dcf-d-flex dcf-flex-wrap dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">15</div>
</div>
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

dcf-flex-wrap-rev

HTML
<div class="dcf-d-flex dcf-flex-wrap-rev dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">15</div>
</div>
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Justify Content

dcf-jc-flex-start

This is the default.

HTML
<div class="dcf-d-flex dcf-jc-flex-start dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-jc-flex-end

HTML
<div class="dcf-d-flex dcf-jc-flex-end dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-jc-center

HTML
<div class="dcf-d-flex dcf-jc-center dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-jc-stretch

Justify content: stretch is not supported by flexbox. It is for use with CSS Grid!

dcf-jc-around

HTML
<div class="dcf-d-flex dcf-jc-around dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-jc-between

HTML
<div class="dcf-d-flex dcf-jc-between dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-jc-evenly

HTML
<div class="dcf-d-flex dcf-jc-evenly dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

Align Items

For this property, having items of different sizes will be a better illustration.

dcf-ai-flex-start

HTML
<div class="dcf-d-flex dcf-ai-flex-start dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-p-1 dcf-m-2 unl-bg-scarlet unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-ai-flex-end

HTML
<div class="dcf-d-flex dcf-ai-flex-end dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-p-1 dcf-m-2 unl-bg-scarlet unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-ai-center

HTML
<div class="dcf-d-flex dcf-ai-center dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-p-1 dcf-m-2 unl-bg-scarlet unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-ai-baseline

HTML
<div class="dcf-d-flex dcf-ai-baseline dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-p-1 dcf-m-2 unl-bg-scarlet unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-ai-stretch

HTML
<div class="dcf-d-flex dcf-ai-stretch dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-p-1 dcf-m-2 unl-bg-scarlet unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

Align Content

For this property, having items that wrap to a second line is helpful to illustrate. Also it is easier to see with a specified height on the container.

dcf-ac-flex-start

This is the default.

HTML
<div style="height: 300px;" class="dcf-d-flex dcf-flex-wrap dcf-ac-flex-start dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">20</div>
</div>
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

dcf-ac-flex-end

HTML
<div style="height: 300px;" class="dcf-d-flex dcf-flex-wrap dcf-ac-flex-end dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">20</div>
</div>
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

dcf-ac-center

HTML
<div style="height: 300px;" class="dcf-d-flex dcf-flex-wrap dcf-ac-center dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">20</div>
</div>
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

dcf-ac-stretch

HTML
<div style="height: 300px;" class="dcf-d-flex dcf-flex-wrap dcf-ac-stretch dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">20</div>
</div>
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

dcf-ac-around

HTML
<div style="height: 300px;" class="dcf-d-flex dcf-flex-wrap dcf-ac-around dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">20</div>
</div>
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

dcf-ac-between

HTML
<div style="height: 300px;" class="dcf-d-flex dcf-flex-wrap dcf-ac-between dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">20</div>
</div>
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

dcf-ac-evenly

HTML
<div style="height: 300px;" class="dcf-d-flex dcf-flex-wrap dcf-ac-evenly dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  ...
  <div class="dcf-p-2 dcf-m-2 unl-bg-scarlet unl-cream">20</div>
</div>
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Item Properties

Align Self

Here is what the baseline for this example looks like, with no classes applied to the flex item.

HTML
<div class="dcf-d-flex dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-p-1 dcf-m-2 unl-bg-blue unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-as-flex-start

HTML
<div class="dcf-d-flex dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-as-flex-start dcf-p-1 dcf-m-2 unl-bg-blue unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-as-flex-end

HTML
<div class="dcf-d-flex dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-as-flex-end dcf-p-1 dcf-m-2 unl-bg-blue unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-as-center

HTML
<div class="dcf-d-flex dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-as-center dcf-p-1 dcf-m-2 unl-bg-blue unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-as-baseline

HTML
<div class="dcf-d-flex dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-as-baseline dcf-p-1 dcf-m-2 unl-bg-blue unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5

dcf-as-stretch

HTML
<div class="dcf-d-flex dcf-p-2 unl-bg-light-gray">
  <div class="dcf-p-5 dcf-m-2 unl-bg-scarlet unl-cream">1</div>
  <div class="dcf-as-stretch dcf-p-1 dcf-m-2 unl-bg-blue unl-cream">2</div>
<div class="dcf-p-8 dcf-m-2 unl-bg-scarlet unl-cream">3</div>
<div class="dcf-p-4 dcf-m-2 unl-bg-scarlet unl-cream">4</div>
  <div class="dcf-p-7 dcf-m-2 unl-bg-scarlet unl-cream">5</div>
</div>
Result
1
2
3
4
5