3.3.4 #Layout.flex.align-items Align
Use align-items utilities on flexbox containers to change the alignment of flex items
on the cross axis (by default the y-axis, x-axis if flex-direction: column).
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
Default styling
Flex item 1
Flex item 2
Flex item 3
.sb-align-items-start
Items are packed toward the start line of the cross axis
Flex item 1
Flex item 2
Flex item 3
.sb-align-items-end
Items are packed toward the end line of the cross axis
Flex item 1
Flex item 2
Flex item 3
.sb-align-items-center
Items are centered along the line of the cross axis
Flex item 1
Flex item 2
Flex item 3
.sb-align-items-baseline
Items are aligned such as their baselines align
Flex item 1
Flex item 2
Flex item 3
.sb-align-items-stretch
Items are stretched to fill the container
Flex item 1
Flex item 2
Flex item 3
Markup
<div class="sb-flex [modifier class] sb-tile" style="height: 100px">
<div class="sb-padding sb-tile">Flex item 1</div>
<div class="sb-padding sb-tile">Flex item 2</div>
<div class="sb-padding sb-tile">Flex item 3</div>
</div>
Source: layout/_flex.scss, line 86