开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情
今天给大家介绍一下css3新特性之弹性盒子的使用给，以及它的一些属性。
Fiex布局
优点：对于移动端更好，也可以用在pc端 Fiex 布局
介绍：
Flex是flexible Box的缩写，意为“弹性缩写“，用来为盒状模型提供最大的的灵活性。
任何一个容器都可以指定为Flex布局。
采用Flex布局的元素，称为Flex容器（flex container），简称容器，，它的所有子元素自动成为容器的成员，称为Flex项目(flex item)，简称“项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross strat，结束位置叫做cross end。
项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
弹性盒子可以代替浮动和定位布局
- 块级元素设置盒模型：
display：flex； - 行内元素设置盒模型：
display：inline-flex； webkit内核的浏览器设置盒模型：display：-webkit-flex； 将一个元素设置为flex布局后，里面的子元素默认按主轴方向排列，宽变为内容的宽，高变为父容器的高。
容器属性：
1、 flex-direction
作用：设置主轴方向。
- 值1：
row主轴为水平方向的话，起点在左端 - 值2：
row-reverse主轴为水平方向的话，起点在右端 - 值3：
column主轴为垂直方向，起点在上沿 - 值4：
column-reverse主轴为垂直方向，起点在下沿
2、 flex-wrap
作用：如果一行放不下，是否换行。
- 值1：
nowrap（默认值）不换行 - 值2：
wrap换行，换到下一行 - 值3：
wrap-reverse换行，换到上一行
flex-flow 该属性是flex-direction属性和flew-wrap属性的简写形式，默认值是row nowrap。
例子：flex-flow：rows nowrap
3. justify-content
作用：定义项目在主轴上的对齐方式
- 值1：
flex-start（默认值）项目位于主轴上的起点 - 值2：
flex-end项目位于主轴上的终点 - 值3：
center居中 - 值4：
space-between两端对齐，项目之间的间隔相等 - 值5：
space-around每个项目两侧的间隔相等，而两边上的项目与边框的距离，是两个项目之间的一半。
- 值6：
space-evenly项目之间的距离和项目与容器的距离一样
4、align-items
作用：定义项目在交叉轴上如何对齐
- 值1：
flex-start项目在副轴上的起点 - 值2：
flex-end项目位于副轴的终点 - 值3：
center垂直居中 - 值4：
baseline项目的第一行文字的基线对齐
- 值5：
stretch（默认值） 如果项目未设置高度 或设为auto，将占满容器的整个高度
设置垂直，项目的高变为内容的高或者是自己设置的高
