flex实现catty music音乐盒

flex-direction:

  • 1
  • 2
  • 3

row

  • 1
  • 2
  • 3

column

  • 1
  • 2
  • 3

row-reverse

  • 1
  • 2
  • 3

column-reverse

flex-wrap:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

wrap-reverse

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

wrap

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

nowrap

flex-flow:

  • 1
  • 2
  • 3
  • 4

row wrap

  • 1
  • 2
  • 3
  • 4

column wrap

  • 1
  • 2
  • 3
  • 4

column wrap-reverse

justify-content:

  • 1
  • 2
  • 3

flex-start

  • 1
  • 2
  • 3

center

  • 1
  • 2
  • 3

space-between

  • 1
  • 2
  • 3

space-around

align-items:

  • 1
  • 2
  • 3

center

  • 1
  • 2
  • 3

flex-end

  • 1
  • 2
  • 3

stretch

  • 1
  • 2
  • 3

baseline

align-content:

  • 1
  • 2
  • 3
  • 4

center

  • 1
  • 2
  • 3
  • 4

stretch

  • 1
  • 2
  • 3
  • 4

space-between

  • 1
  • 2
  • 3
  • 4

space-around

align-self:

  • 1

flex-start

  • 2

center

  • 3

flex-end

  • 4

stretch

  • 5
  • 6
  • 7

baseline

  • 8

auto

order:

  • 1
  • 2
  • 3
  • 4
  • 5

-20013

flex-grow:

  • 1
  • 2
  • 3
  • 4
  • 5

50px12380px

flex-shrink:

  • 1
  • 2
  • 3
  • 4
  • 5

200px123100px

flex-basis:

  • 1
  • 2
  • 3

150px50%auto

flex:

  • 1
  • 2
  • 3

0

  • 1
  • 2
  • 3

auto

  • 1
  • 2
  • 3

none

  • 1
  • 2
  • 3

0 auto