Align Contents

Basic

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/align-contents.scss#L11

<!-- align content center -->
<div class="u-align-content-center">Align Content Center</div>

<!-- align content start -->
<div class="u-align-content-start">Align Content Start</div>

<!-- align content end -->
<div class="u-align-content-end">Align Content End</div>

<!-- align content stretch -->
<div class="u-align-content-stretch">Align Content Stretch</div>

Flexbox

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/align-contents.scss#L44

<!-- align content flex start -->
<div class="u-align-content-flex-start">Align Content Flex-Start</div>

<!-- align content flex end -->
<div class="u-align-content-flex-end">Align Content Flex-End</div>

Distributed

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/align-contents.scss#L63

<!-- align content space between -->
<div class="u-align-content-space-between">Align Content Space-Between</div>

<!-- align content space around -->
<div class="u-align-content-space-around">Align Content Space-Around</div>

<!-- align content space evenly -->
<div class="u-align-content-space-evenly">Align Content Space-Evenly</div>

Baseline

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/align-contents.scss#L89

<!-- align content baseline -->
<div class="u-align-content-baseline">Align Content Baseline</div>

Globals

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/align-contents.scss#L101

<!-- align content inherit -->
<div class="u-align-content-inherit">Align Content Inherit</div>

<!-- align content initial -->
<div class="u-align-content-initial">Align Content Initial</div>

<!-- align content unset -->
<div class="u-align-content-unset">Align Content Unset</div>