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.
Jump to a section
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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>