Below you will find a set of common flexbox layouts and examples we use throughout the Optimizely application and OUI framework:
Easy vertical and horizontal centering, no parent .flex necessary.
Change direction of flex items from row to column.
For vertical alignment.
For horizontal alignment.
Fill available width, which stretches backgrounds.
Move element without modifying width.
Distribute width across siblings.
This combines flex--1 to fill the gap while pushing the tiny button right, then employs two flex-align--center helper classes for inner text and button alignment.
PreviewUI is our most complicated Flexbox use to date with many nested flexboxes combinations, including scrolling.