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');