布局是css中很重要的一部分，一般来说我们会用盒模型，定位，浮动来解决。但是对于一些特殊情况传统的解决方法就会比较复杂。
比如垂直居中，等距分布等。
所以在2009年，w3c提出了一种新的解决方法——Flex(弹性布局)。
一
在了解Flex之前，我们先来了解一下Flex的一些基本特性。
1.任何元素都可以设置Flex。Flex的作用相当于一个容器，当元素设置了Flex之后，会对容器内的子元素起作用。
2.绝大部分的浏览器都支持Flex,但是会有版本的限制。
不同版本浏览器的兼容问题可参考下图。
3.容器中默认有两条轴线，默认情况下水平的为主轴，垂直的为交叉轴，用来限定我们的布局方法，有点类似数学上的X轴和Y轴。
在主轴左侧的开始位置叫做main start，结束位置叫做mian end。在交叉轴顶部开始的位置叫做cross strat，在结束的位置叫做 cross end。
具体可参考下图。
浅灰色部门表示设置了flex的容器，深灰色的色块表示在容器下的子集。
二.
下面正式开始说容器上的6个属性。（下文默认主轴方向为水平方向）
1. flex-direction: row(默认) | row-reverse | column | column-reverse;
设置容器下元素的排列方向，row表示水平从左向右，row-reverse则表示反向水平从右向左，同理column表示垂直从上至下，column-reverse从下至上。
我们一起来看个demo:
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#div1{
width: 200px;
height: 200px;
background:red;
}
#div1 div{
width:48px;
height:48px;
background:green;
color:#fff;
border:1px solid #fff;
}
<div id="div1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
这是没有设置Flex的时候。
在此基础上，我们给div加上flex-direction
#div1{
display:flex;
flex-direction:row;
width: 200px;
height: 200px;
background:red;
}
再来看一下flex-direction:column和flex-direction:column-reverse
2.flex-wrap: nowrap(默认) | wrap | wrap-reverse;
定义容器内元素如何换行，nowrap不换行，wrap向下换行，wrap-reverse向上换行。
还是看demo:
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#div1{
display:flex;
flex-wrap:nowrap;
width: 200px;
height: 200px;
background:red;
}
#div1 div{
width:48px;
height:48px;
background:green;
color:#fff;
border:1px solid #fff;
}
</style>
<div id="div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
我给每个div设置宽度是50px，按理说容器是放不下第5个div的，但是如果我设置了flex-wrap:nowrap，结果是不会换行的，而是会自动的适应。
下面来看看另外两个属性：
有个地方值的说一下：换行的行距会自动计算容器的高度进行自动计算，也就是说第5个div距离第一行和距离底部的距离是相等的。
我们可以多些几个测试一下。
3.flex-flow: <flex-direction> || <flex-wrap>;
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，用法跟上面是一样的。
4.justify-content: flex-start（默认） | flex-end | center | space-between | space-around
定义容器下元素在主轴方向上的对齐方式，flex-start向左对齐，flex-end向右对齐，space-between两端对齐，space-around：每个元素两侧的间隔相等。
我们一起来看下效果(代码就不贴了，跟原来是一样的)
5.align-items: flex-start| flex-end | center | baseline | stretch(默认) ;
有主轴方向的，肯定就有交叉轴的。align-items定义了交叉轴的对齐方式，flex-start顶端对齐，flex-end底部对齐，baseline根据元素的第一行文字的基线对齐，stretch在未设置高度或者高度为auto的情况下，高度自适应容器对齐。
我们依次来看一下效果。
给第二个设置一个padding-top:10px;另外两个的位置会自动调整，跟第二个的文字基线对齐。
6.align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。也就是说，我们只有在我们给容器设置了换行之后，这个属性才会起作用。
具体的效果跟.align-items是类似的，不同的只是一个是设置多行的。
假设现在我们有两行，但是设置的是align-items：center，他会先换行，然后把换行之后的两行内容看作一个整体，再进行居中。
但如果是align-content则效果不同，他会把两个元素都居中。
三.
说完容器的取值，我们再来说说容器下子元素的取值，它的取值也有6个。
1.order
元素的排列顺序，数值越大越靠后，默认情况下为0；
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#div1{
display:flex;
width: 200px;
height: 200px;
background:red;
}
#div1 div{
width:48px;
height: 48px;
background:green;
color:#fff;
border:1px solid #fff;
}
#div1 div:nth-child(2){
order: 1;
}
</style>
<div id="div1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
给第二个div设置order为1，2就跑后面去了。
2.flex-grow
定义元素的放大比例，默认为0，表示元素本身大小。
同样的，我给元素放大0.5倍，元素的宽度就变为75px;
#div1 div:nth-child(2){
flex-grow:0.5;
}
如果我放大2倍，那么第二个div应该会变为150px，但实际上元素的宽度是100。也就是说，元素放大只会分配容器剩余的空间，而不会一直放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3.flex-shrink
有放大就有缩小，这个属性是定义元素的缩小比例，跟放大类似，默认值为1，也就是说项目空间不足时自动缩小。（这就是为什么不换行的时候，元素会自动缩小的原因）
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
4.flex-basis: <length> | auto;
定义元素在分配多余空间之前，占据的大小。浏览器会根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。也可以设置为固定值，比如多少PX，在容器空间有剩余的情况下就是元素的值，但是在元素空间没有剩余的情况下会自动进行缩放。
5.flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6. align-self: auto | flex-start | flex-end | center | baseline | stretch;
align-self属性可单独设置元素的对齐方式，并可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
对齐方式与align-items相同。
