Flex布局

一直对flex布局一知半解。不能这样。今天总结一下。

https://zhuanlan.zhihu.com/p/25303493

指定flex：设置display：flex | inline-flex 此操作会将float、clear等属性屏蔽。

main axis：主轴

cross axis：交叉轴

flex容器：指定一个容器作为flex，可以在该容器上设置一些属性。

容器的六种属性：

1. flex-direction：决定主轴的方向
   1. row 左→右（默认）
   2. row-reverse 右→左
   3. column 上→下
   4. column-reverse 下→上 
2. flex-wrap：决定是否可换行
   1. nowrap 不换行（默认）
   2. wrap 主轴总尺寸超过容器时换行，第一行在上方
   3. wrap 同上 第一行在下方
3. flex-flow
4. justify-content：项目在主轴的对齐方式
   1. flex-start：左对齐
   2. flex-end：右对齐
   3. center：居中
   4. space-between：两端靠边，项目之间间隔相等
   5. space-around：每个项目两侧间隔相等
5. align-items：项目在交叉轴的对齐方式
   1. stretch（默认） / 未设置高度 / 高度为auto：元素占满整个容器
   2. flex-start：交叉轴的起点对齐
   3. flex-end：交叉轴的终点对齐
   4. flex-center：交叉轴的中心对齐
   5. baseline：项目第一行文字的基线对齐
6. align-content：多跟轴线的对齐方式（当设置为nowrap 不换行时，样式只会有一根轴线，因此不会受此属性影响。但是当换行时，形成了多跟轴线，就会应用此属性进行设置。）
   1. strech（默认）多跟轴线评分交叉轴的空间。
   2. flex-start：在交叉轴的起点处对齐
   3. flex-end：在交叉轴的终点对齐
   4. center：在交叉轴的中间对齐
   5. space-between：两侧轴线两端对齐，中间的轴线平分剩余空间
   6. space-around：每个轴线两侧间隔相等，平分交叉轴空间