flex布局
兼容使用
块元素使用flex布局
div{
display: flex;
}
行内元素使用flex布局
span{
display: inline-flex;
}
Webkit内核的浏览器使用flex布局（Safari）
div{
display: -webkit-flex;
}
设置flex布局后，子元素的float、clear、vertical-align属性将会失效。
基本概念
容器和项目
使用flex布局的元素，称为“容器”，容器中的所有子元素称为“项目”。下面会详细介绍容器和项目的属性。
主轴和交叉轴
默认情况下，容器有两根轴：水平方向的是“主轴”，从左向右。与主轴垂直交叉的轴叫做“交叉轴”，从上向下。
容器属性
1. flex-direction
该属性是设置主轴方向的，默认情况下是水平向右的。
div{
display: flex;
flex-direction: column;
}
-
row（默认）：主轴在水平方向，起点在左侧
-
row-reverse：水平方向，起点在右侧
-
column：主轴在垂直方向，起点在上
-
column-reverse：垂直方向，起点在下
2. flex-wrap
该属性定义在一条轴上如果排列不下所有子元素怎么进行换行。
div{
flex-wrap: wrap;
}
-
nowrap（默认）：不换行
-
wrap：换行，第一行在上面
-
wrap-reverse：换行，第一行在下面
3. flex-flow
该属性是flex-direction和flex-wrap的简写。默认就是上面两个属性的默认。
div{
flex-flow: column || wrap;
}
4. justify-content
定义项目在主轴上的排列方式。
div{
justify-content: space-between;
}
-
flex-start（默认）：紧靠左侧，并且每个项目紧挨依次排列
-
flex-end：同上，但是紧靠右侧
-
center：居中
-
space-between：左右两侧对齐，并且每个项目之间间隔相同。
-
space-around：每个项目两侧的间隔相等
5. align-items
定义项目在交叉轴上的对齐方式。
div{
align-items：center;
}
-
flex-start：交叉轴起点对齐
-
flex-end：交叉轴终点对齐
-
center：居中
-
baseline：项目第一行的文字基线对齐
-
stretch（默认）：如果项目没有设置高度或者auto，将占满整个容器高度。
baseline.png
stretch.png
align-content
该属性定义多个主轴轴线的对齐方式。如果只有一条主轴，那么该属性无效。
div{
align-content: space-around;
}
-
flex-start：靠交叉轴起点对齐
-
flex-end：靠交叉轴终点对齐
-
center：交叉轴中间
-
space-between：交叉轴两端对齐，每条主轴之间间隔平均分配。
-
space-around：每条主轴两侧的间隔相等。
-
stretch：轴线占满整个交叉轴
stretch.png
项目属性
1. order
该属性可以设置项目的排列顺序，值越小越靠前。默认为0。
.item{
order: 2;
}
flex-grow
该属性定义项目的放大比例，默认为0，即使存在剩余空间也不放大。
.item{
flex-grow: 1;
}
.item2{
flex-grow: 2;
}
如果所有项目的该属性都是1，那么所有项目平分剩余空间，如果一个是2，剩下的都是1，那么属性为2的所占的空间是其他项目的2倍。
flex-shrink
与flex-grow相反，设置项目的缩小比例，默认为1，即如果剩余空间不足，项目将缩小。
.item{
flex-shrink: 1;
}
如果所有项目的的该属性都是1，则空间不足时，都等比缩小。如果有一个项目该属性是0，则该项目不缩小。
负值无效
4. flex-basis
项目所占据主轴的固定空间，出去这个固定空间，剩下的空间才供上面两个属性去分配。该属性的默认值是auto，即项目本身的大小，可以想宽高一样设置固定的像素值。
item{
flex-basis: 300px;
}
5. flex
该属性是flex-grow、flex-shrink、flex-basis的简写，默认值是0、1、auto。第一个属性必选，后面两个属性可选。
item{
flex: 1 1 auto;
}
item2{
flex: 1;
}
建议使用两个快捷值：auto和none。
auto等同于1 1 auto，即占满额外空间并且可缩放。
none等同于0 0 auto，即不占额外空间并且不可缩放。
6. align-self
该属性允许某一个项目有和其他项目不一样的对齐方式，可以覆盖掉align-items属性，默认值为auto即继承父元素的align-items属性。如果没有父元素，则等同于stretch。
div{
align-items: flex-start;
}
item{
align-self: flex-end;
}
align-self.png
该属性除了默认值
auto之外，其他属性值都和align-items属性一致
