Bootstrap Flex

New

Flex

  • .d-flex
  • .d-*-flex
  • .d-inline-flex
  • .d-*-inline-flex
  • .d-flex flex-row
  • .d-flex flex-row-reverse
  • .d-flex flex-column
  • .d-flex flex-column-reverse
  • .d-flex justify-content-start
  • .d-flex justify-content-end
  • .d-flex justify-content-center
  • .d-flex justify-content-between
  • .d-flex justify-content-around
  • .d-flex flex-wrap
  • .d-flex flex-wrap-reverse
  • .d-flex flex-nowrap
  • .d-flex flex-wrap align-content-start
  • .d-flex flex-wrap align-content-end
  • .d-flex flex-wrap align-content-center
  • .d-flex flex-wrap align-content-around
  • .d-flex flex-wrap align-content-stretch
  • .d-flex align-items-start
  • .d-flex align-items-end
  • .d-flex align-itmes-center
  • .d-flex align-items-baseline
  • .d-flex align-items-stretch
    • .flex-fill
    • .flex-grow-1
    • .flex-shrink-1
    • .order-1(0-12)
    • .mr-auto
    • .ml-auto
    • .align-self-start
    • .align-self-end
    • .align-self-center
    • .align-self-baseline
    • .align-self-stretch
A
B
C

A
B
C


A
B
C

A
B
C

A
B
C

A
B
C

A
B
C

A
B(take up the rest of the space)
C

A
B
C

A
B
C

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O

A
B
C

A
B
C