Overview
Use these options with the .flex display class.
Direction
| Class | Example |
|---|---|
.flex--column
|
A
B
C
|
.flex--column-reverse
|
A
B
C
|
.flex--row
|
A
B
C
|
.flex--row-reverse
|
A
B
C
|
Placement
| Class | Example |
|---|---|
| Content (class applied to flex container) | |
.content--baseline
|
A
B
C
|
.content--start
|
A
B
C
|
.content--end
|
A
B
C
|
.content--center
|
A
B
C
|
.content--stretch
|
A
B
C
|
.content--space-b
|
A
B
C
|
.content--space-a
|
A
B
C
|
| Items (class applied to flex container) | |
.items--baseline
|
A
B
C
|
.items--start
|
A
B
C
|
.items--end
|
A
B
C
|
.items--center
|
A
B
C
|
.items--stretch
|
A
B
C
|
| Self (class applied to child of flex container) | |
.self--baseline
|
A
B
C
|
.self--start
|
A
B
C
|
.self--end
|
A
B
C
|
.self--center
|
A
B
C
|
.self--stretch
|
A
B
C
|
Justification
| Class | Example |
|---|---|
.justify--start
|
A
B
C
|
.justify--end
|
A
B
C
|
.justify--center
|
A
B
C
|
.justify--stretch
|
A
B
C
|
.justify--space-b
|
A
B
C
|
.justify--space-a
|
A
B
C
|
Wrapping
| Class | Example |
|---|---|
.flex--wrap
|
A
B
C
|
.flex--wrap-reverse
|
A
B
C
|
.flex--nowrap
|
A
B
C
|
Order
Orders elements among those with a specified order. More information (MDN)
Available breakpoint modifiers; md, lg, xl and xxl
These modifiers work mobile first; for example, if you want to make an element appear first on desktop but last on other sizes, you would add --lg to make .flex-order--0--lg
| Class | Example |
|---|---|
.flex-order--0
|
Order: 0
Order: 1
Order: 2
Order: 3
Order: 4
|
.flex-order--1
|
Order: 0
Order: 1
Order: 2
Order: 3
Order: 4
|
.flex-order--2
|
Order: 0
Order: 1
Order: 2
Order: 3
Order: 4
|
.flex-order--3
|
Order: 0
Order: 1
Order: 2
Order: 3
Order: 4
|
.flex-order--4
|
Order: 0
Order: 1
Order: 2
Order: 3
Order: 4
|