3.3.2 #Layout.flex.direction Direction

Toggle example guides Toggle HTML markup

Set the direction of flex items in a flex container with direction utilities.

Browser support: IE10+, Safari6+*, Firefox30+, Chrome30+

Default styling
Flex item 1
Flex item 2
Flex item 3
.sb-flex-row
Set the flex items to a horizontal direction
Flex item 1
Flex item 2
Flex item 3
.sb-flex-row-reverse
Set the flex items to a horizontal direction from the opposite side *Safari9+
Flex item 1
Flex item 2
Flex item 3
.sb-flex-column
Set the flex items to a vertical direction
Flex item 1
Flex item 2
Flex item 3
.sb-flex-column-reverse
Set the flex items to a vertical direction
Flex item 1
Flex item 2
Flex item 3
Markup 
<div class="sb-flex [modifier class] sb-tile">
  <div class="sb-padding">Flex item 1</div>
  <div class="sb-padding">Flex item 2</div>
  <div class="sb-padding">Flex item 3</div>
</div>
Source: layout/_flex.scss, line 29