css3弹性盒子常用样式属性梳理汇总

direction

修改元素排列方式，可单独使用，会影响子元素内部元素排列

• rtl
  1

  2

  12

flex-direction

弹性子元素在父容器中的位置

• row-reverse
  1

  2

  3
• column-reverse
  1

  2

  3

justify-content

弹性子元素（横向）排列方式，可单独使用，会影响子元素内部元素排列

• flex-start
  1

  2

  3
• flex-end
  1

  2

  3
• center
  1

  2

  3
• space-between
  1

  2

  3
• space-around
  1

  2

  3
• space-evenly
  1

  2

  3

align-items

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

• flex-start
  1

  2

  3
• flex-end
  1

  2

  3
• center
  1

  2

  3

flex-wrap

指定弹性盒子的子元素换行方式

• wrap
  1

  2

  3

  4

  5

  6

  7
• wrap-reverse
  1

  2

  3

  4

  5

  6

  7

align-content

配合 flex-wrap 使用,设置各个行的对齐

• flex-start
  1

  2

  3

  4

  5

  6

  7
• flex-end
  1

  2

  3

  4

  5

  6

  7
• center
  1

  2

  3

  4

  5

  6

  7
• space-between
  1

  2

  3

  4

  5

  6

  7
• space-around
  1

  2

  3

  4

  5

  6

  7
• space-evenly
  1

  2

  3

  4

  5

  6

  7

弹性子元素属性

order

设置弹性容器内弹性子元素的排序

• order:-1
  1

  2

  order:-1

margin

设置弹性容器内弹性子元素的对齐方式

• margin-left: auto
  1

  2

  剩余空间居左
• margin-right: auto
  1

  2

  剩余空间居右
• margin: auto
  完美居中
• margin: auto
  完美居中

  完美居中

align-self

设置弹性元素自身在侧轴（纵轴）方向上的对齐方式

• order:-1
  flex-start

  flex-end

  center

  stretch

flex

指定弹性子元素如何分配空间

• order:-1
  flex-start

  flex-end

  center

  stretch