flexbox弹性盒子

　　display:flex;是网页布局的一种常用方式，十分方便。

　　弹性盒子分为flex容器和flex项，具体的CSS属性也是应用于这两个区块；

　　弹性盒子中分为主轴main axis，交叉轴cross axis，通过在flex容器中设置flex-direction进行设置主轴方向

• column；
• row；

　　

　　应用于flex容器中的属性：

• flex-direction用于设置主轴方向，值有：column，row（行），column-reverse,row-reverse（倒置项）；
• flex-wrap用于设置flex容器中的flex项是否会进行换行，值有：wrap
• flex-flow:row wrap;是flex-direction和flex-wrap的缩写
• align-items用于设置容器内的所有flex项在交叉轴方向上的排列方式；

1. 默认值为stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器，如果父容器在交叉轴上没有固定的宽度，那么所有项的高度都会默认与最长的项相等
2. center,flex项会保持原有高度，但是会垂直居中
3. 也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。

• justify-content用于设置容器内的所有flex项在主轴方向上的排列方式；

1. 默认值是flex-start,这会使所有 flex 项都位于主轴的开始处。
2. flex-end,这会使所有 flex 项都位于主轴的结束处。
3. space-around,它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间;在flex项的两侧填充自适应空白
4. space-between，与space-around十分相似，除了不会两侧留空间；因为两侧并没有其他的项可以between
   

　　应用于flex项的属性

• flex-grow:1--这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。
• flex-basis:200px
• flex-shrink--
• flex:1 200px;这是一个缩写属性，---每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享
• align-self用于覆盖容器中的align-items属性
• order--flex项排序--弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。

1. 所有flex项默认值是0
2. order值越小的flex项，显示越靠前
3. 相同order值的flex，按照原dom顺序排放
4. 可设置负值