Flex小结

　　参考两篇文章 文章1 文章2

　　容器用display: flex;或display: inline-flex;指定为弹性Flex布局。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器有6个属性可以设置：

• flex-direction  表示主轴方向，一般使用默认的水平方向，不设置
• flex-wrap　　  表示多条轴线如何换行，一般使用默认的不换行，不设置
• flex-flow　　   是上面2个属性的简写，一般不设置
• justify-content  定义了项目在主轴上的对齐方式，有时会用到！
• align-items      定义项目在侧轴上对齐的对齐方式，有时会用到！
• align-content   定义了多根轴线的对齐方式，一般用不到，不设置

项目有6个属性可以设置：

• order        定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow　　 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。有时会用到！
• flex-shrink   flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis    定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。有时会用到。
• flex　　      flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。有时会用到，一般只用第一个值。
• align-self    align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。