弹性盒子（转载自）

为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局

有两个主轴

main axis

cross axis

容器属性

• flex-direction ：决定主轴的方向即item的排列方向 默认为水平  值（row | row-reverse | column | column-reverse）
• flex-wrap：排不下换行的效果 值（nowrap | wrap | wrap-reverse）
• flex-flow:上面两个属性的缩写默认为（row nowrap）
• justify-content：项目在主轴上面的对齐方式 值（start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline）
• align-item：交叉轴上的对齐方式 值（flex-start | flex-end | center | baseline | stretch）
  
  align-item:baseline;
• 效果如下
  

   stretch:如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-content:定义多根轴线的对齐方式 值（flex-start | flex-end | center | space-between | space-around | stretch）

align-content:space-around;效果如下

item的属性

• order:排列顺序越大越靠后
• flex-grow：放大比例 根据比例分配剩余下来的位置
• flex-shrink：缩小比例
• flex-basis：分配多于位置时候之前占据的位置大小
• flex：flex属性是flex-grow，flex-shrink和flex-basis的简写
• align-self：允许单个项目与其他项目有不一样的对齐方式