Flexbox Utilities


Horizontal Alignment

Default (Left)
.cell.small-4
.cell.small-4
Center
.cell.small-4
.cell.small-4
Right
.cell.small-4
.cell.small-4
Justify
.cell.small-4
.cell.small-4
Spaced
.cell.small-4
.cell.small-4

Vertical Alignment All Children

Default (Stretch)
.cell.small-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.
.cell.small-4
Top
.cell.small-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.
.cell.small-4
Middle
.cell.small-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.
.cell.small-4
Bottom
.cell.small-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.
.cell.small-4
Stretch
.cell.small-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.
.cell.small-4

Vertical Alignment Individual Children

Default (Stretch)
.cell.small-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.
.cell.small-4
Top
.cell.small-4.align-self-top
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.
.cell.small-4
Middle
.cell.small-4.align-self-middle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.
.cell.small-4
Bottom
.cell.small-4.align-self-bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.
.cell.small-4
Stretch
.cell.small-4.align-self-stretch
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.
.cell.small-4

Central Alignment

.cell.small-4
.cell.small-4

Flexbox Helper Classes

.flex-container
.flex-dir-row
.flex-dir-row-reverse
.flex-dir-column
.flex-dir-column-reverse
.flex-child-auto
.flex-child-grow
.flex-child-shrink
              

All of these helper classes come in responsive variations, e.g. .medium-flex-child-grow.

Learn more about the flexbox property on Mozilla Developer Network.

Example 1: Flex Row With Justified Children
Flex Child #1
Flex Child #2
Flex Child #3
Example 2: Flex Column With Spaced And Middle-aligned Children
Flex Child #1
Flex Child #2
Flex Child #3
Example 3: Responsive Variations For Flex Container and Flex Child

Small Devices: Reversed Flex Row With Growing Flex Child #2
Large Devices: Reversed Flex Column With Shrinking Flex Child #2

Flex Child #1
Flex Child #2
Flex Child #3

Source Ordering

Cell #1 .medium-order-3
Cell #2 .small-order-1
Cell #3 .large-order-5
Cell #4 .small-order-2
Cell #5 .medium-order-4
Cell #6 .large-order-6