Display
Flex
A
B
C
A
B
C
Flex container
@include x-display('flex');
Inline-flex
A
B
A
B
Flex container
@include x-display('inline-flex');
Flex-direction
Row
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
Row-reverse
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row-reverse');
Column
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('column');
Column-reverse
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('column-reverse');
Flex-wrap
Nowrap
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-flex-wrap('nowrap');
Wrap
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-flex-wrap('wrap');
Wrap-reverse
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-flex-wrap('wrap-reverse');
Flex-flow
Column wrap
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
Flex container
@include x-display('flex');
@include x-flex-flow('column wrap');
Column nowrap
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-flow('column nowrap');
Justify-content
Flex-start
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-justify-content('flex-start');
Flex-end
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-justify-content('flex-end');
Center
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-justify-content('center');
Space-between
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-justify-content('space-between');
Space-around
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-justify-content('space-around');
Align items
Flex-start
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-align-items('flex-start');
Flex-end
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-align-items('flex-end');
Center
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-align-items('center');
Baseline
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-align-items('baseline');
Stretch
A
B
C
D
E
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-align-items('stretch');
Align content
Flex-start
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-flex-wrap('wrap');
@include x-align-content('flex-start');
Flex-end
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-flex-wrap('wrap');
@include x-align-content('flex-end');
Center
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-flex-wrap('wrap');
@include x-align-content('center');
Space-around
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-flex-wrap('wrap');
@include x-align-content('space-around');
Space-between
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-flex-wrap('wrap');
@include x-align-content('space-between');
Stretch
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
Flex container
@include x-display('flex');
@include x-flex-direction('row');
@include x-flex-wrap('wrap');
@include x-align-content('stretch');
Order
Number
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
@include x-order('2');
Flex grow
Number
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
@include x-flex-grow('1');
Flex shrink
Number
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
@include x-flex-shrink('2');
Flex basis
Number
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
@include x-flex-basis('200px');
Flex
Initial
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
-
@include x-flex('auto');
-
@include x-flex('initial');
Auto
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
@include x-flex('auto');
None
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
-
@include x-flex('auto');
-
@include x-flex('none');
Align-self
Auto
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
-
@include x-align-self('center');
-
@include x-align-self('auto');
Flex-start
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
@include x-align-self('flex-start');
Flex-end
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
@include x-align-self('flex-end');
Center
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
@include x-align-self('center');
Baseline
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
@include x-align-self('baseline');
Stretch
A
B
C
D
E
Flex container
@include x-display('flex');
Flex item
-
@include x-align-self('flex-start');
-
@include x-align-self('stretch');