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