How to Flexbox

Below you will find a set of common flexbox layouts and examples we use throughout the Optimizely application and OUI framework:

.flex--dead-center

Easy vertical and horizontal centering, no parent .flex necessary.

1

.flex

  1. Defines a flex container
  2. Children are flex items
  3. Block by default vs .inline-flex

1

2

3

.flex--column

Change direction of flex items from row to column.

1

2

3

.flex-align--(start, center, end)

For vertical alignment.

Start
Center
End

.flex-justified--(start , center , end)

For horizontal alignment.

Start
Center
End

.flex--1

Fill available width, which stretches backgrounds.

Changes
  • 4

.flex, .anchor--right

Move element without modifying width.

Changes
  • 4

.flex--1, .flex--1

Distribute width across siblings.

Left
Right

.flex--1, .flex-align--center x2

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.

    • Audience Name
      Token Component

Flex all the things

PreviewUI is our most complicated Flexbox use to date with many nested flexboxes combinations, including scrolling.

Overview
x
...
...
...
...
...
...