Layout Flexbox
Super powerful flex layout
Sandbox
Enjoy the power of flexbox
Children
Direction
Row
Column
Row reverse
Column reverse
Wrap
Yes
No

Justify content
baseline
stretch
flex-start
center
flex-end
space-around
space-between
space-evenly
Justify items
baseline
stretch
flex-start
flex-end
center
Align content
baseline
stretch
flex-start
flex-end
center
space-around
space-between
space-evenly
Align items
baseline
stretch
flex-start
flex-end
center
Responsive
The system was build to response to different sizes in which includes the flex, offsets, horizontal alignment, vertical alignment, show and hide for xs, sm, md, lg and xl sizes.
Layout
Breakpoint
{row,column}Default layout can be override by other
{row,column}-xswidth < 600px
{row,column}-gt-xswidth >= 600px
{row,column}-sm600px <= width < 960px
{row,column}-gt-smwidth >= 960px
{row,column}-md960px <= width < 1280px
{row,column}-gt-mdwidth >= 1280px
{row,column}-lg1280px <= width < 1920px
{row,column}-gt-lgwidth >= 1920px
{row,column}-xlwidth >= 1920px
<div class="example layout column">
  <div class="layout row wrap spacing-1">
    <div class="flex-xs-3 flex-sm-7 flex-gt-sm-3">
      <div class="box"></div>
    </div>
    <div class="flex-xs-9 flex-sm-5 flex-gt-sm-6">
      <div class="box"></div>
    </div>
    <div class="flex-xs-12 flex-sm-12 flex-gt-sm-3">
      <div class="box"></div>
    </div>
  </div>
  <div class="layout row wrap spacing-1">
    <div class="flex-2 flex-gt-md-4">
      <div class="box"></div>
    </div>
    <div class="flex-2 flex-gt-md-1">
      <div class="box"></div>
    </div>
    <div class="flex-2 flex-gt-md-1">
      <div class="box"></div>
    </div>
    <div class="flex-2 flex-gt-md-1">
      <div class="box"></div>
    </div>
    <div class="flex-2 flex-gt-md-1">
      <div class="box"></div>
    </div>
    <div class="flex-2 flex-gt-md-4">
      <div class="box"></div>
    </div>
  </div>
  <div class="layout row wrap spacing-1">
    <div class="flex-xs-3 flex-sm-9 flex-gt-sm-6">
      <div class="box"></div>
    </div>
    <div class="flex-xs-9 flex-sm-3 flex-gt-sm-6">
      <div class="box"></div>
    </div>
  </div>
</div>
Nesting layouts
You can nest your content inside another layout and so on.
L-1
L-3
L-3
L-3
L-2
L-3
L-3
L-1
<div class="layout row layout-xs-column level-1 spacing-1">
  <div class="flex">
    <div class="flex box">L-1</div>
    <div class="flex layout column level-2 spacing-1">
      <div class="flex layout row level-3 spacing-1">
        <div class="flex box">L-3</div>
        <div class="flex box">L-3</div>
        <div class="flex box">L-3</div>
      </div>
      <div class="flex box">L-2</div>
      <div class="flex layout row level-3 spacing-1">
        <div class="flex box">L-3</div>
        <div class="flex box">L-3</div>
      </div>
    </div>
  </div>
  <div class="flex layout column spacing-1">
    <div class="flex-12 box">L-1</div>
  </div>
</div>
Flex
The .flex class added to a layout's child element will flex (grow or shrink) to fit the unused are by other elements.
.flex-1
.flex-2
.flex-3
.flex-4
.flex-5
.flex-8
.flex
<div class="layout row wrap spacing-1">
   <div class="flex-1">
      <div class="box">.flex-1</div>
   </div>
   <div class="flex-2">
      <div class="box">.flex-2</div>
   </div>
   <div class="flex-3">
      <div class="box">.flex-3</div>
   </div>
   <div class="flex-4">
      <div class="box">.flex-4</div>
   </div>
   <div class="flex-5">
      <div class="box">.flex-5</div>
   </div>
   <div class="flex-8">
      <div class="box">.flex-8</div>
   </div>
   <div class="flex">
      <div class="box">.flex</div>
   </div>
</div>
Responsive Flex
The flex classes are responsive.
flex 66% on mobile and 33% otherwise
flex 33% on mobile and 66% otherwise
Flex values
The layout provides various flex values to improve flexibility.
Value
Description
flexWill grow and shrink as needed.
Starts with a size of 0%. Same as 
.flex-0
.
flex-noneWill not grow nor shrink.
Sized based on its 
width
and 
height
values.
flex-initialWill shrink as needed.
Sized based on its 
width
and 
height
values.
flex-autoWill grow and shrink as needed.
Starts with a size based on its 
width
and 
height
values.
flex-growWill grow and shrink as needed.
Starts with a size of 100%. Same as 
.flex-12
.
flex-nogrowWill shrink as needed, but won't grow.
Starts with a size based on its 
width
and 
height
values.
flex-noshrinkWill grow as needed, but won't shrink.
Starts with a size based on its 
width
and 
height
values.
flex-0Will grow and shrink as needed.
Starts with a size of 0%. Same as 
.flex
.
Ordering
Add the class .order to reorder elements within layout container. The values goes from -20 to 20.
Order
Breakpoint
orderDefault order can be override by other
order-xs
width
< 600px
order-gt-xs
width
≥ 600px
order-sm600px ≤ 
width
< 960px
order-gt-sm
width
≥ 960px
order-md960px ≤ 
width
< 1280px
order-gt-md
width
≥ 1280px
order-lg1280px ≤ 
width
< 1920px
order-gt-lg
width
≥ 1920px
order-xl
width
≥ 1920px
.order--1
.order--4
.order-1
.order--3
<div class='layout row spacing-1'>
  <div class='flex order--1'>
    <div class='box'>.order--1</div>
  </div>
  <div class='flex order--4'>
    <div class='box'>.order--4</div>
  </div>
  <div class='flex order-1'>
    <div class='box'>.order-1</div>
  </div>
  <div class='flex order--3'>
    <div class='box'>.order--3</div>
  </div>
</div>
Offsets
Add the class .offset to a layout's child element to set its offset percentage within the layout container. Value must be multiples of 1, 3 or 9.
.flex.offset-3
.flex-4.order--1
<div class='layout row spacing-1'>
  <div class='flex offset-3'>
    <div class='box'>.flex.offset-3</div>
  </div>
  <div class='flex-4 order--1'>
    <div class='box'>.flex-4.order--1</div>
  </div>
</div>
Offset
Breakpoint
offsetDefault offset can be override by other
offset-xs
width
< 600px
offset-gt-xs
width
≥ 600px
offset-sm600px ≤ 
width
< 960px
offset-gt-sm
width
≥ 960px
offset-md960px ≤ 
width
< 1280px
offset-gt-md
width
≥ 1280px
offset-lg1280px ≤ 
width
< 1920px
offset-gt-lg
width
≥ 1920px
offset-xl
width
≥ 1920px
Alignment
The .align class is composite for two words, the first indicates the horizontal alingment and the second indicates vertical alignment. If one word is passed it'kk works but only for horizontal alignment.
Order
Breakpoint
alignDefault align can be override by other
align-xs
width
< 600px
align-gt-xs
width
≥ 600px
align-sm600px ≤ 
width
< 960px
align-gt-sm
width
≥ 960px
align-md960px ≤ 
width
< 1280px
align-gt-md
width
≥ 1280px
align-lg1280px ≤ 
width
< 1920px
align-gt-lg
width
≥ 1920px
align-xl
width
≥ 1920px
<div class="layout row wrap">
  <div class="flex-4 layout column justify-content-center">
    <div class="flex layout row justify-content-space-around">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="flex box"></div>
    <div class="flex box"></div>
  </div>
  <div class="flex-8 layout column justify-content-space-around">
    <div class="flex-3 box"></div>
    <div class="flex-3 box"></div>
  </div>
  <div class="flex-2 layout row wrap justify-content-end">
    <div class="flex-1 box"></div>
    <div class="flex-2 box"></div>
    <div class="flex-7 box"></div>
    <div class="flex-2 box"></div>
  </div>
</div>
Padding
The .p{a,t,r,b,l}-{1-5} class add padding to elements.
.pa-1
.pa-2
.pa-3
.pa-4
.pa-5
Padding axis
The .p{x,y}-{1-5} class add padding to elements.
.py-5
.px-5
Margin
The .m{a,t,r,b,l}-{1-5} class add padding to elements.
.ma-1
.ma-2
.ma-3
.ma-4
.ma-5
Margin axis
The .m{x,y}-{1-5} class add padding to elements.
.my-5
.mx-5
Wrapping
The .wrap allows you to wrap all children within container if the elements use more than 100%;
.flex-3
.flex-4
.flex-3
.flex-3
.flex-5
.flex-8
.flex-10
.flex-4
<div class="example layout row wrap">
  <div class="flex-3">
    <div class="box">.flex-3</div>
  </div>
  <div class="flex-4">
    <div class="box">.flex-4</div>
  </div>
  <div class="flex-3">
    <div class="box">.flex-3</div>
  </div>
  <div class="flex-3">
    <div class="box">.flex-3</div>
  </div>
  <div class="flex-5">
    <div class="box">.flex-5</div>
  </div>
  <div class="flex-8">
    <div class="box">.flex-8</div>
  </div>
  <div class="flex-10">
    <div class="box">.flex-10</div>
  </div>
  <div class="flex-4">
    <div class="box">.flex-4</div>
  </div>
</div>
Fill
The .layout-fill class forces the layout to fill its parent container.
.flex-3
Unfilled layout
Filled layout
<div class="example layout row wrap pa-2">
  <div class="flex-3 pa-2">
    <div class="box">.flex-3</div>
  </div>
  <div class="flex-5 layout row pa-2">
    <div class="box">Unfilled layout</div>
  </div>
  <div class="layout row fill level-2 pa-2">
    <div class="box">Filled layout</div>
  </div>
</div>

Fluid

Converts the container into a full width container, just replace .container for .container-fluid

<div class='container-fluid'>
  <div class='layout.row'>
    <div class='flex-xs-100 flex-sm-50 flex-md-60 flex-80'>
      <div class='box'>Container fluid</div>
    </div>
  </div>
</div>
Show & Hide
The layout comes with responsive hide and show attributes. Indepently there is the class .show-* that provides to not layout elements show and hide.
Class
Breakpoint
showAlways visible
show-xsShows only when 
width
< 600px, hidden otherwise
show-gt-xsShows only when 
width
≥ 600px, hidden otherwise
show-smShows only when 600px ≤ 
width
< 960px, hidden otherwise
show-gt-smShows only when 
width
≥ 960px, hidden otherwise
show-mdShows only when 960px ≤ 
width
< 1280px, hidden otherwise
show-gt-mdShows only when 
width
≥ 1280px, hidden otherwise
show-lgShows only when 1280px ≤ 
width
< 1920px, hidden otherwise
show-gt-lgShows only when 
width
≥ 1920px, hidden otherwise
show-xlShows only when 
width
≥ 1920px, hidden otherwise
.show-gt-md
.show-sm
Only visible when width ≥ 600px
Only visible when
width < 600px
<div class="example layout row-gt-xs wrap spacing-1">
   <div class="flex show-gt-md">
      <div class="box">.show-gt-md</div>
   </div>
   <div class="flex show-sm">
      <div class="box">.show-sm</div>
   </div>
   <div class="flex">
      <div class="box">Only visible when width >= 600px</div>
   </div>
</div>
<div class="example layout row-xs wrap spacing-1">
   <div class="flex-60">
      <div class="box">Only visible when</div>
   </div>
   <div class="flex">
      <div class="box">width
         < 600px</div>
      </div>
   </div>
</div>