传统的布局方案是基于盒模型，依赖于display:block和float+position，但是对于一些特殊的布局来说就不是很方便，如在盒模型中垂直居中。
2009年W3C提出一种新的布局方案，flex弹性盒布局，目前兼容的浏览器有chrome opera IE Firefox Sifari
flex兼容浏览器版本
但是在未来flex布局将会成为布局的首选方案。
flex是flexinle BOX的缩写。意思是弹性布局，用来为盒模型提供最大的灵活性。 任何一个容器（标签）都可以指定为flex布局。用display:flex；
如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效
flex的基本概念
容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
如果给一个元素设置为flex后，这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。
二
首先要给父元素添加display:flex；将父元素转化为弹性盒
2.用flex-direction来改变盒子里元素的位置
row 默认在一行内排列（从左向右）
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column ：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3.内容对齐（justify-content）属性应用在 弹性容器 上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content：flex-start 默认，左对齐（图1）
justify-content:flex-end 右对齐（图2）
justify-content:center 居中对齐（图3）
justify-content:space-between 两端对齐，中间自动分配
justify-content:space-around 自动分配距离
主轴对齐方式
4.align-items（交叉轴对齐方式）
flex-start：顶端对齐
flex-end：底对齐
center：垂直居中对齐
baseline：项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器（注：子元素不能设置高）
交叉轴对齐方式
5.flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
图1（nowrap）注意如果父元素盒设置宽度会自动缩子元素容器宽度
图2（wrap）
图3（warp-reverse）
容器单行或者多行方式
6、align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注：本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
结构呢？我觉得挺像。好，Div的结构搞定了，下面就用CSS去控制它：equal{display:tableborder-collapse:separate}.row {display:table-row}
.row div {display:table-cell}
.row .one {width:200px}
.row .two {width:200px}
.row .three {}
上面说一下上边各个CSS属性的意义：
1.dispaly:table让.equal层作为块级元素的表格来显示，也就是将显示成表格的样子
2.border-collapse:separate边框独立，就像表格没有合并单元格以前
3.display:table-row将.row作为表格行tr显示
4.display:table-cell将.row的下级div作为表格单元格td显示
使用border-spacing:10px主要是来区分几个盒子，因为IE下不能正常显示，但是在：Mozilla、Opera、Firefox、Chrome下都是可以的。
最近老是遇到布局问题，尤其是在垂直居中布局上。之前不了解display：flex最近看了看书，简单的整理了下，于是就产生了这篇文章flex弹性布局可以简便，完整，响应式的实现各种页面的布局，而且现在也得到了所有浏览器的支持，实在是布局很便利的工具呢。
一、flex布局的基本概念
1.任何一个元素使用display：flex属性后都可以看做一个flex容器；2.它的子元素变成flex容器中的项目，称为flex item；3.flex容器里面默认存在两根主轴：水平的主轴和垂直的轴
，用这两根轴将容器分成多行
二、flex容器的基本属性
1.flex-direction属性：表示项目的排列方式或者说主轴的方向，有以下四个值
row:默认值，主轴为水平方向，从左向右排列
row-reverse:主轴为水平方向，从右向左排列
column:主轴为垂直方向，从上往下排列
column-reverse:主轴为垂直方向，从下往上排列
2.flex-wrap属性：默认情况，所有的子元素都在一行，此属性主要定义如果不在一行时子元素如何排列，有如下三个值：
nowrap：不换行
wrap：换行
wrap-reverse：换行，第一行在下方，第二行在第一行上面依次类推
3.flex-flow：集1.和2.属性于一身，意思就是这个属性可以直接指定上面两个属性的值，默认值为：row nowrap
4.justify-content：定义子元素在主轴上的对齐方式，有以下五个值：
flex-start：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐
space-around：每个项目两侧间隔相等
5.align-items属性：定义子元素在水平轴和垂直轴的交叉轴上如何对齐，有以下五个值：
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字基线对齐
strecth:默认
6.algin -content属性：定义多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用，该属性有以下六个值：
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
space-between：与交叉轴的两端对齐，轴线间的间隔平均分布
space-around：每根轴线的两侧的间隔都相等
strecth：默认，轴线占满整个交叉轴
三、子元素（项目）的属性
1.order属性：定义子元素的排列顺序，数值越小，排列越靠前，默认为0
2.flex-grow属性：定义项目的放大比例，默认值是0，就是如果存在剩余空间，也不放大。
若所有子元素的flex-grow值为1，则子元素等分剩下的空间
若一个元素的属性值为N，剩下值为1，则属性值为N的元素等分的空间是1的N倍
3.flex-shrink属性：定义了项目的缩小比例，默认为1，就是如果空间不足，该项目将缩小
若所有子元素此属性为1，空间不足时，将会被等比缩小，
若有元素属性值为0，即使空间不足，也不会被缩小
4.flex-basis属性：定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto原本的大小，也可以设置px结尾固定大小
5.flex属性：是2.3和4属性的简写，默认值为：0 1 auto，可以只写第一个值，后面两个是可选参数；该属性的两个快捷值：auto（1 1 auto）和none（0 0 auto）
6.align-self属性：此属性允许单个子元素与其他子元素不一样的对齐方
auto：默认值，表示继承父元素的属性，
其他：align-items值相同
四、一起来试一试
