3.3.3 #Layout.flex.justify-content Justify
Use justify-content utilities on flexbox containers to change the alignment of flex items
on the main axis (by default the x-axis, y-axis if flex-direction: column).
Browser support: IE10+, Safari6+*, Firefox30+, Chrome30+
Default styling
Flex item 1
Flex item 2
Flex item 3
.sb-justify-content-start
Items are packed toward the start line
Flex item 1
Flex item 2
Flex item 3
.sb-justify-content-end
Items are packed toward the end line
Flex item 1
Flex item 2
Flex item 3
.sb-justify-content-center
Items are centered along the line
Flex item 1
Flex item 2
Flex item 3
.sb-justify-content-between
Items are evenly distributed in the line
Flex item 1
Flex item 2
Flex item 3
.sb-justify-content-around
Items are evenly distributed in the line with equal space around them *Safari9+
Flex item 1
Flex item 2
Flex item 3
Markup
<div class="sb-flex [modifier class] sb-tile">
<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 56