3.3.5 #Layout.flex.wrap Wrap

Toggle example guides Toggle HTML markup

Change how flex items wrap in a flex container.

Browser support: IE11+, Safari9+, Firefox30+, Chrome30+

Default styling
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
.sb-flex-nowrap
No wrapping of the items
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
.sb-flex-wrap
Wrap the items in a new line. The direction is defined by flex-direction.
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Markup 
<div class="sb-flex [modifier class] sb-tile" style="width: 700px">
  <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 class="sb-padding">Flex item 4</div>
  <div class="sb-padding">Flex item 5</div>
  <div class="sb-padding">Flex item 6</div>
  <div class="sb-padding">Flex item 7</div>
  <div class="sb-padding">Flex item 8</div>
  <div class="sb-padding">Flex item 9</div>
  <div class="sb-padding">Flex item 10</div>
</div>
Source: layout/_flex.scss, line 116