弹性盒子(flex 布局)

父容器：

• justify-content：沿着主轴方向排列子容器
• align-items：沿着交叉轴方向排列子容器
• flex-wrap：子容器是否换行排列
• flex-flow == flex-direction 和 flex-wrap
• align-content：子容器多行排列，设置行与行之间的对齐方式

子容器：

• align-self(单独设置子容器交叉轴排列) == align-items
• flex-basis：设置基准大小(表示在不伸缩的情况下子容器的原始尺寸)
  • 如果所有子元素的基准之和大于剩余空间，则会根据每项设置的基准值，按比例伸缩剩余空间
• flex-grow：设置扩展比例(子容器弹性伸展的比例)
• flex-shrink：设置收缩比例(子容器弹性收缩的比例)
• order：设置子容器的排列顺序，默认值为0
• flex：缩写
  • 单值
    • 无单位：grow
    • 有单位：basis
  • 双值
    • 无单位：grow & shrink
    • 有单位：grow & basis
  • 三值：grow & shrink & basis
    • flex:initial === flex:0 1 auto（重置为初始值，不拉伸）
    • flex:auto === flex:1 1 auto（既可以拉伸也可以收缩）
    • flex:none === flex:0 0 auto（不可伸缩）
    • flex:1 / flex:2 === flex:1 1 0（元素在 flex-basis:0 的基础上伸缩）