Flex弹性布局
//设为flex布局
1 .box {
display: -webkit-flex; // webkit内核的浏览器要加前缀 2 display: flex; 3 }
设flex布局后，子元素的float, clear和verticle-align属性会失效。
flex容器的子元素自动成为容器成员。
容器有两根轴：水平的主轴（默认），垂直的交叉轴。
一、容器的属性：
- flex-direction:决定项目的排列方向。
值：
row(默认）：从左往右水平；
row-reverse: 从右往左水平；
column:从上往下垂直；
column-reverse:从下往上垂直。
- flex-wrap:如何换行。
值：
nowrap（默认）：不换行；
wrap:换行，第一行在上面；
wrap-reverse:换行，第一行在下面。
flex-flow:flex-direction和flex-wrap的简写，默认row nowrap。
- justify-content:项目的对齐方式。
值：
flex-start（默认）：左对齐；
flex-end:右对齐；
center:居中；
space-between:两端对齐，项目间隔相等；
space-around:项目两侧的间隔相等。项目间的间隔比项目与边框的间隔大一倍。
- align-items:项目在交叉轴上如何对齐。
值：
flex-start:交叉轴的起点对齐；
flex-end:交叉轴的终点对齐；
center:交叉轴的中点对齐；
baseline:项目第一行文字的基线对齐；
stretch(默认）：若项目未设置高度或设为auto,将沾满整个容器高度。
- align-content:定义多根轴线的对齐方式。若只有一条轴线，属性不起作用。
flex-start:交叉轴的起点对齐；
flex-end:交叉轴的终点对齐；
center:交叉轴的中点对齐；
space-between:两端对齐，轴线间间隔平均；
space-around:轴线两侧的间隔相等。轴线间的间隔比轴线与边框的间隔大一倍。
stretch(默认）：轴线占满整个交叉轴。
二、项目的属性：
- order: 定义项目的排列顺序。数越小越排前，默认0.
- flex-grow:定义项目的放大比例。默认0，即如果存在剩余空间也不放大。
- flex-shrink:定义项目的缩小比例。默认1，即如果空间不足，项目将缩小。负值对该属性不生效。
- flex-basis:定义在分配多余空间前项目占据的主轴空间。默认auto,即项目的本来大小。可设为跟width和height一样的值，项目将占据固定空间。
- flex:flex-grow,flex-shrink和flex-basis的缩写，默认0 1 auto,后两个属性可选。该属性有两个快捷键：auto(1 1 auto)和none(0 0 auto).建议优先写这个属性，而不是分开写三个属性，因为浏览器会推算相关值。
- align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items.默认auto,表示继承父元素的align-items,如果没有父元素，等同于stretch.
值（6个）：
除了auto,其他值与align-items一样。
