弹性盒子布局（Flex Box）
前言
有人问我：经常用到的flex: 1是哪几个属性的复合属性
我：有点尴尬，不知道了，emmm...
flex布局在前端开发中使用的还是比较多的，但是大多数前端（其中就包括我自己），一味的使用flex: 1或者flex: auto等，但是不知其所以然的情况下，如果出现了样式问题或者浏览器兼容性问题，马上就很慌,然后又去找到底哪里有问题。这也是我重学Flex布局的原因之一，因为知道其原理才可掌握其精髓。
1. 了解什么是Flex布局？
Flex是Flexible Box的缩写，意为“弹性盒子”。可以简便、完整、响应式地实现各种页面布局
弹性盒子由Flex容器（flex container）和Flex项目（flex item）组成。
注意：容器的所有子元素自动成为容器成员，称为Flex项目。
从上图来看，容器中默认存在两条轴，主轴（main axis）和交叉轴(cross axis)，项目默认沿主轴排列
- main start:主轴的开始位置（与边框的交叉点）
- main end: 主轴的结束位置
- cross start: 交叉轴的开始位置
- cross end: 交叉轴的结束位置
- main size: 单个项目占据的主轴空间
- cross size: 单个项目占据的交叉轴空间
2.我们如何开始一个Flex布局？
任何一个容器都可以设置flex布局
.container {
display: flex;
}
行内元素也可以使用flex布局
.container {
display: inline-flex;
}
Webkit 内核的浏览器，必须加上-webkit前缀。
.container {
display: -webkit-flex;
}
注意:设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
3. 容器属性
接着我们来看弹性容器的6个属性
-
flex-direction -
flex-wrap -
flex-flow -
justify-content -
align-items -
align-content
注意：具体的以下属性与轴的方向有关，假设主轴的方向都是从左到右（也就是flex-direction默认的）
flex-direction
设置主轴的方向（项目排列的方向）
语法如下
flex-direction: row | row-reverse | column | column-reverse
-
row：默认值。沿水平方向，从左到右 -
row-reverse：沿水平方向，从右像左 -
column：沿垂直方向，从上到下 -
column-reverse：沿垂直方向，从下到上
flex-wrap
如果轴线上排列不下了，设置项目是否换行，如果换行的话向上还是向下换行
语法如下
flex-wrap: nowrap | wrap | wrap-reverse
-
nowrap: 默认值。表示容器内子元素全部显示在一行
wrap:表示宽度或者高度不够时自动往下换行
wrap-reverse: 表示宽度或者高度不够时自动往上换行
flex-flow
是flex-direction和flex-wrap的复合属性
语法如下
flex-flow: flex-direction flex-wrap
举个栗子
写个沿着水平方向，自动换行的样式
flex-flow: row wrap;
justify-content
设置项目在主轴上的对齐方式
语法如下
justify-content: flex-start | center | flex-end | space-between | space-around
flex-start:默认值。左对齐
center: 居中(主轴)
flex-end: 右对齐
space-between: 两端对齐，项目之间的间隔都相等
space-around:两个项目两侧间隔相等，项目之间的间隔比两边大一倍
align-items
定义项目在交叉轴上的对齐方式 语法如下
align-items: flex-start | center | flex-end | baseline | stretch（默认值）
上面我们写到假设主轴是从左到右，那么交叉轴就是从上到下
flex-start: 交叉轴的起点对齐
center: 交叉轴中点对齐
flex-end: 交叉轴的终点对齐
baseline: 项目第一行的基线对齐
stretch: 默认值。项目如果未设置高度或者设置为auto，则占满整个屏幕
align-content
定义多根轴线的对齐方式。如果项目只有一根轴线，则该属性不起作用
语法如下
align-content: flex-start | center | flex-end | space-between | space-around | stretch（默认值）
flex-start: 和交叉轴的起点对齐
center: 和交叉轴的中点对齐
flex-end: 和交叉轴的终点对齐s
space-between：和交叉轴两端对齐，项目中间间隔相等
space-around: 每根轴线的两侧间隔相等，两个项目之间的间隔是两侧的一倍
stretch：铺满整个交叉轴
4. 项目属性
orderflex-growflex-shrinkflex-basisflexalign-self
order
设置项目的排列顺序，数值越小越靠前，默认值为0
语法如下
order: <interger>
举个栗子：
设置项目的order分别为99 0 -1 8 -2,显示如下图
flex-grow
设置项目的放大比例：默认值为0.意思为如果有剩余空间，也不放大
语法如下
flex-grow: <number>
举个栗子
如果所有的项目都设置flex-grow:1，说明等分剩余空间
如果有的项目设置flex-grow:1，有的设置flex-grow:2说明设置2的是设置1的两倍
flex-shrink
设置项目的缩小比例：默认值为1.意思为如果剩余空间不足，将会缩小
语法如下
flex-shrink: <number>
举个栗子
如果所有的项目都设置为flex-shrink: 1,空间不足时将等比例缩小。如果有一个设置了0，那个为0的，将不会缩小，其他设置为1的，将按照剩余空间等比例缩小
flex-basis
定义了在分配多余空间之前，项目所占的主轴空间（main size）。默认值：auto，即原来项目的大小.如果设置了width,则项目尺寸则由width/height(主轴方向)决定，如果没有设置则由内容决定。
语法如下
flex-basis: <length> | auto
当设置为0时，会根据内容撑开。
当设置和width和height一样的值（350px），占固定空间。
flex
该属性是flex-grow、flex-shrink、flex-basis的复合属性，默认值：0 1 auto。
后面两个属性可选
语法如下
flex: flex-grow flex-shrink flex-basis; // 后面两个可选
项目中这个符合属性用的比较多，一般不会一个个的去写
一些属性有：
flex: 1===flex: 1 1 0flex: 2===flex: 2 1 0flex：auto===flex: 1 1 autoflex: none===flex: 0 0 auto(常用于固定尺寸不伸缩)
flex:1和flex：auto的区别就是在于flex-basis:0 和flex-basis:auto的区别
当设置为0时，此时就是告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸
当设置为auto时，就是说明你们需要考虑下我的尺寸
align-self
允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。
默认是是auto，表示继承父元素中的align-items属性。如果没有父元素，则等同于stretch
语法如下
align-self: auto| flex-start | center | flex-end | baseline | stretch（默认值）
这其中的属性就比align-items多了一个auto属性。其他属性都和align-items属性一个意思
5.浏览器兼容
- 红色为不支持flex布局
- 绿色部分为完全支持
- 还有1、2、3、4标签支持的各有不同，具体详情请看
参考文献