Flex布局
Flexible布局，也就是弹性布局。
Flexible的优点是，不需要对元素设置固定的宽度和高度，元素的位置和大小也会跟着父元素或者浏览器的状态来自动适配。
同时还添加了水平居中和垂直居中的解决方案。
在页面中指定一个元素作为Flex布局，那么这个元素就是作为容器冤元素。设置如下：
.box{
display:flex;
}
行内元素也是可以使用flex布局的。
注意：父元素设置为flex后，子元素的float、clear和vertical-align的设置就会失效。
Flex的兼容性写法
尽管有很多的浏览器已经实现了无前缀的版本，但是在系统比较旧版本的移动端设备上，只能带上前缀。
那么，我们在写代码的时候，就要考虑样式的兼容性了：
.box{
display:-webkit-flex; // 新版本语法加前缀
display:flex; // 新版本语法
display:-webkit-box; // 旧版本语法
}
.children{
-webkit-flex:1; // 新版本语法加前缀
flex:1; // 新语法
-webkit-box-flex:1; // 旧版本语法
}
Flex容器属性
弹性容器有两个方向：水平方向和垂直方向，弹性容器的子元素默认沿着水平方向排列。Flex容器有这些属性：
1、flex-direction
该属性决定主轴的方向；属性值如下：
- row：表示设置主轴为水平方向，从左到右，该值为默认值
- row-reverse：表示设置主轴为水平方向，从右到左
- column：表示设置主轴为垂直方向，从上到下
- column：表示设置主轴为垂直方向，从上到下
2、flex-wrap
该属性决定如果一条轴线排列时内容超出，那么该如何换行；属性值如下：
- nowrap：表示单行显示，不换行，该值为默认值
- wrap：表示内容超出容器宽度时换行显示，第一行在上方
- wrap-reverse：表示内容超出容器宽度时换行显示，但是从下往上开始，也就是第一行在最下方，最后一行在最上方
3、flex-flow
该属性是flex-direction和flex-wrap的缩写，即一个属性可以实现设置两个属性的功能。
4、justify-content
该属性决定了主轴方向上子元素的对齐和分布方式；属性值如下：
- flex-start：表示主轴方向左对齐，该值为默认值
- flex-end：表示主轴方向右对齐
- center：表示主轴方向居中对齐
- space-between：表示主轴方向两端对齐，子元素之间的间隔都相等，多余的空白间距只在子元素中间区域分配
- space-around：表示主轴方向距容器两侧的间隔相等
5、align-items
该属性决定了交叉轴方向上子元素的对齐和分布方式；属性值如下：
- flex-start：表示子元素在容器交叉轴方向顶部对齐
- flex-end：表示子元素在容器交叉轴方向底部对齐
- center：表示子元素在容器交叉轴方向居中对齐
- baseline：表示所有子元素都相对第一行文字的基线（字母x的下边缘）对齐。
- stretch：表示子元素拉伸，如果主轴是水平方向，且该子元素未设置高度或者把高度设置为auto，那么子元素将会占满整个容器的高度；如果主轴是垂直方向，且该子元素未设置宽度或者把宽度设置为auto，那么子元素将会占满整个容器的宽度；如果设置了高度和宽度，那么按照设置值显示子元素。该值为默认值。
6、align-content
该属性决定了多根轴线的对齐方式。如果容器只有一根轴线，那么该属性不起作用；属性值为：
- flex-start：表示子元素在容器交叉轴方向顶部对齐
- flex-end：表示子元素在容器交叉轴方向底部对齐
- center：表示子元素在容器交叉轴方向整体居中对齐
- space-between：表示子元素在容器交叉轴方向两端对齐，剩下每一行子元素等分剩余的空间
- space-around：表示子元素在容器交叉轴方向上两侧的间距都相等，且位于起点和终点的元素与容器边框的间距为两侧间距的1/2
- stretch：表示每一行子元素都拉伸，是align-content的默认值。
Flex容器元素的子元素，有以下几个属性：
- order：该属性决定子元素的排列顺序
- flex-grow：该属性决定子元素的放大比例
- flex-shrink：该属性决定子元素的缩小比例
- flex-basis：该属性决定在分配多余空间之前，子元素占据的主轴空间的大小
- flex：该属性是复合属性，由flex-grow、flex-shrink和flex-basis组成
- align-self：该属性决定了子元素与其他子元素不一样的排列和对齐方式