在前面一篇关于css历史遗留问题的文章中，我们提到了flex这个概念，这是一种新兴的布局方式，他目前已经得到了所有浏览器的支持，我们可以放心大胆的在我们的系统中使用他。
什么是Flex
Flex，事实上是Flexible Box的缩写，简称弹性布局，这是一种一维布局，可以很好的处理子元素在一个维度上（水平或者垂直）的元素排列，所有的容器都可以指定为Flex布局，只需要将容器的display属性设置为flex。
.box{
display: flex | inline-flex;
}
容器的属性
有以下六个属性可以作用于flex容器上，我们逐个来看他们的作用：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.flex-direction 决定主轴的方向
它可以是以下四个值
- row 横向，从左向右依次排列（默认）
- row-reverse 翻转横向，从右向左依次排列
- column 竖向，从上到下依次排列
- column-reverse 翻转竖向，从下到上依次排列
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
2.flex-wrap 在一条轴线排不下的情况下，是否允许换行
他可以是以下三个值
- nowrap 不换行（这个是默认值）
- wrap 换行，排列在第一行下面
- wrap-reverse 换行，排列在第一行上方
.box {
flex-wrap : nowrap | wrap | wrap-reverse;
}
3.flex-flow 是以上两个属性的简写，默认值为row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4.justify-content 主轴上的对齐方式
我们能用到的基本上是以下五个值：
- flex-start：左对齐（默认值）
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
5.align-items
可以设置为以下五个值中的一个：
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。（默认值，使用flex布局可以解决多列等高问题的原因）
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。（可以实现垂直居中）
baseline: 项目的第一行文字的基线对齐。
.box {
align-items: stretch | flex-start | flex-end | center | baseline;
}
6.align-content 多根轴线情况下的对齐方式，用于flex-wrap不为nowrap的情况下。
他可以是以下六个值：
- stretch（默认值）：轴线占满整个交叉轴
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center：与交叉轴的中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
.box {
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
子元素的属性
子元素的属性也是6个，我们也逐一来看:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order 定义排列顺序，数值越小的越靠前，默认值为0
.item {
order: <integer>;
}
flex-grow 定义存在剩余空间的时候，项目放大比例，默认是0（不放大）
.item {
flex-grow: <number>; /* default 0 */
}
比如有两个子元素A和B，flex-grow都为1，那么他们将会平分剩余空间，现在我们将B的flex-grow改为2，那么B元素获取的剩余空间将是A的两倍。
flex-shrink 定义了空间不足时，项目的缩小比例，默认为1
.item {
flex-shrink: <number>; /* default 1 */
}
当我们想要其中一个元素不缩小的时候，可以把它的flex-shrink属性单独设置为0。
flex-basis 项目占据的主轴空间，默认值为auto
.item {
flex-basis: <length> | auto; /* default auto */
}
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
他有两个特殊的值：auto(1 1 auto) 和 none(0 0 auto)
align-self 单个元素的对齐方式，它可以覆盖父元素的align-items属性，默认值为auto，即父元素的align-items属性。
他可以填入的属性值和align-items几乎一致，只是多了个默认值auto。
- auto：默认值，继承父元素属性aligin-items，没有则为stretch
- stretch：占满整个容器的高度。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
.item {
align-self:auto | stretch | flex-start | flex-end | center | baseline;
}
