Flexbox Grid

a sexy, flexy grid system by clare o’neill

Default grid layout

.flex-item-1
.flex-item-11
.flex-item-2
.flex-item-10
.flex-item-3
.flex-item-9
.flex-item-4
.flex-item-8
.flex-item-5
.flex-item-7
.flex-item-6
.flex-item-6
.flex-item-7
.flex-item-5
.flex-item-8
.flex-item-4
.flex-item-9
.flex-item-3
.flex-item-10
.flex-item-2
.flex-item-1
.flex-item-11
.flex-item-2
.flex-item-1
.flex-item-3
.flex-item-6
.flex-item-7
.flex-item-2
.flex-item-3

Mini grid layout

add the .mini class to a .flex-row element to apply the default grid styling to its children .flex-item elements, when the viewport is smaller than 500px (recommend using .flex-item-4 at the narrowest column width)

.flex-item-4
.flex-item-8
.flex-item-5
.flex-item-7
.flex-item-6
.flex-item-6
.flex-item-7
.flex-item-5
.flex-item-8
.flex-item-4

.flex-row layout modifying classes

.flex-row.flex-grow

add the .flex-grow class to a .flex-row element to make all of its .flex-item children fill the horizontal space, regardless of each of their assigned column classes

.flex-item-2
.flex-item-1
.flex-item-3

.flex-item flex-wrap

.flex-row.wrap (default)

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.no-wrap

add the .no-wrap class to a .flex-row element to make all of its .flex-item children fit onto one line

.flex-item
.flex-item
.flex-item
.flex-item
.flex-item
.flex-item
.flex-item
.flex-item
.flex-item

.flex-row.wrap-reverse

add the .wrap-reverse class to a .flex-row element to make its .flex-item children wrap right to left (if default is LTR, or left to right if default is RTL)

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row justify-content

control alignment of the .flex-item elements along the main axis

.flex-row.justify-start (default)

.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.justify-end

.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.justify-center

.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.justify-between

.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.justify-around

.flex-item-2
.flex-item-2
.flex-item-2

.flex-row align-items

defines alignment of the .flex-item elements along the cross-axis (perpendicular to the justify-content axis)

.flex-row.align-items-start

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.align-items-end

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.align-items-center

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.align-items-baseline

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.align-items-stretch (default)

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row align-content

defines alignment of the lines of .flex-item elements within their .flex-row parent container when there is extra space on the cross-axis (doesn’t do anything when there is only a single line of .flex-item elements)

.flex-row.align-content-start

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.align-content-end

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.align-content-center

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.align-content-baseline

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-row.align-content-stretch (default)

.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2
.flex-item-2

.flex-item layout modifications

.flex-item.flex-grow

add the .flex-grow class to any .flex-item element to make it fill the remaining horizontal space, regardless of its assigned column class

.flex-item-2
.flex-item-1.flex-grow
.flex-item-3

.flex-item align-self

allows the default alignment of an individual .flex-item element to be overridden (overrides parent .flex-row element’s align-items property)

default
.align-start
.align-end
.align-center
.align-baseline
.align-stretch

Shortcut grid layouts

.flex-row-two

.flex-item
.flex-item
.flex-item

.flex-row-three

.flex-item
.flex-item
.flex-item
.flex-item

.flex-row-four

.flex-item
.flex-item
.flex-item
.flex-item
.flex-item
.flex-item
.flex-item