Layout

flex-box layout with bootstrap compatability, with bootstrap-tech fall-back for IE9.

Grid classes

Basics

.flex-container
Required: identifies an element that will act as the grid container.
.flex-item
Required: identifies an element as a item of the grid.
breakpoints sm, md, lg
optionally inserted after the flex prefix in the classes below specify layout breakpoints

Gutters

.flex-gutters
Creates a 0.5rem (8px) gutter between each item
.flex-sm-gutters-wide
1rem (16px) for devices tablet-sized or greater
.flex-gutters-wider
2rem (32px)
.flex-gutters-widest
3rem (48px)
.flex(-xs|-sm|-md|-lg)?-gutters(-wide(r|st)?)?
Pattern

Containers

.flex-middle
Vertically aligns all flex-items in a flex-container to the middle.
.flex-bottom
Vertically aligns all flex-items in a flex-container to the bottom.

Items

.flex-sm-2of3
An item 66.66% the width of the container on a device tablet-size or larger.
.flex-md-full
An item 100% the width of the container on a browser of a regular screen or larger.
.flex-hide
An item hidden until a show breakpoint is hit.
.flex-md-show
An item shown on a browser of a regular screen or larger.
.flex-md-fill
IE10+: An item fills evenly distributed on a browser of a regular screen or larger.
.flex-md-collapse
An item shrinks to minimum width on a browser of a regular screen or larger.
.flex(-xs|-sm|-md|-lg)?-([1-11]of[2-12]|full|show|hide|collapse|fill[2-6]?)
Pattern
.flex-item-middle
Vertically aligns the flex-item to the middle of the flex-container.

Examples

Resize your browser window to see how the grid behaves.

Default Full (Mobile first)

flex-item Full
flex-item Full

Simple All-sizes percentage width with gutters

flex-item flex-1of2 Half
flex-item flex-1of2 Half

Percentages at medium screen with wide gutters

flex-item flex-md-1of2 Full Half
flex-item flex-md-1of2 Full Half

Smaller percentages with wider screens

flex-item flex-sm-2of4 flex-md-1of6 flex-lg-2of8
flex-item flex-1of2 flex-sm-1of4 flex-md-1of6 flex-lg-1of8
flex-item flex-1of2 flex-sm-1of4 flex-md-1of6 flex-lg-1of8
flex-item flex-sm-2of4 flex-md-1of6 flex-lg-2of8
flex-item flex-1of2 flex-sm-1of4 flex-md-1of6 flex-lg-1of8
flex-item flex-1of2 flex-sm-1of4 flex-md-1of6 flex-lg-1of8

show/hide at breakpoints

flex-item flex-md-1of2
flex-item flex-hide flex-md-1of2 flex-md-show

(Recommended) Fill and collapse with ie9 fallback (click to toggle)

.. flex-md-fill flex-md-1of4
.. flex-md-fill-2 flex-md-2of4
.. collapse

Ordering

flex-item flex-fill
flex-item flex-fill flex-md-order-1
flex-item flex-fill flex-md-order--1

Vertical Alignment

flex-item flex-1of4
This is a second line.
Third line.
More lines
And even more lines.
Last line.
flex-item flex-1of4
flex-item flex-1of4
flex-item-middle
flex-item flex-1of4 flex-item-bottom

More

For more on the Flexbox grid see CSS Trick's Guide, also Solved by Flexbox documentation.