弹性布局-01

(1)任何一个盒子都可以指定为flex布局    display:flex;
(2)行内元素也可以使用flex布局    display:inline-flex;
(3)webkit内核的浏览器必须加上-webkit前缀    display:-webkit-flex;
!!!注意!!!：
    设置为flex布局以后，子元素的float、clear和vertical-align属性将失效，

    采用flex布局的容器成为flex容器，他的所有子元素自动成为容器成员。

/*在父元素添加此属性,来控制其下的子元素们*/
display: flex;

/*设置其下的子元素的排列方式*/
flex-direction: row | row-reverse | column | column-reverse;
/*row：默认值主轴为水平方向，起点在左端*/
/*row-reverse：主轴为水平方向，起点在右端。*/
/*column：主轴为垂直方向，起点在上沿。*/
/*column-reverse：主轴为垂直方向，起点在下沿。*/

/*设置其下的子元素如果超出了父元素的范围时候换行显示*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*nowrap:默认不换行；*/
/*wrap：换行，第一行在上；*/
/*wrap-reverse：换行，第一行在下。*/
/*换行显示的话会平分分割其下的间隔*/

flex-flow:  flex-direction和flex-wrap的简写形式；默认值为: row/nowrap

/*设置当前下的子元素是以什么方式对齐*/
justify-content: center;
/*flex-start:默认值 主轴的开始位置对齐*/
/*flex-end：主轴结束位置对齐*/
/*center居中对齐*/
/*space-between两端对齐，项目之间的距离相等；*/
/*space-around 每个项目之间的距离相等。*/