以前在做项目的时候,涉及到弹性布局的时候，通常用display:-webkit-box,后来看到还有display:flex,研究了一下，发现还是有区别的。
浏览器兼容问题
box布局的兼容性
box是2009年提出来的，是旧版的写法。
在w3school关于css的参考手册中提到：
目前没有浏览器支持 box-align 属性。
Firefox 支持替代的 -moz-box-align 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。
但经过测试，Firefox中使用-webkit-box,-webkit-box-flex等属性，也是可以正确解析的。
而反之，在chrome，opera等浏览器使用-moz-box却解析不出来，可以说-moz-前缀是firefox专用的。
因此，应当尽量使用-webkit-前缀，当然可以两个都加。如果同时加，建议将-webkit-写在前面以利于渲染。
ie-edge支持-webkit-box,但ie11及以下都不支持
另外根据之前使用的经验，目前的手机浏览器包括android和ios平台均-webkit-box
flex布局兼容性
flex布局标准是2012年提出来的，相比之下，现代浏览器对flex的支持度更高。不用写-webkit-等前缀都基本上能解析。
包括ie11，ie-edge,safari,opera,chrome都能很好地支持这个布局。
综上所述，弹性布局在使用时应该以flex为主。如果要兼容老版本的web或手机浏览器，再加入-webkit-box,-moz-box等兼容代码。
而如果要兼容ie10,ie11，那就只能用flex布局了。
关于flex和box布局的详细使用，可以参考相关文档：
box
https://www.cnblogs.com/jr1993/p/4751410.html
flex
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
或
http://blog.csdn.net/magneto7/article/details/70854472
这里我主要做一下对比，以便记忆。
box与flex
两种布局的思想基本上是一致的，只是flex又增加了一些属性：
都需要通过设置容器和子元素的样式，两者相互配合。
容器有主轴和交叉轴，都可设置横排和纵排。两个轴方向上都提供了居中和两边对齐，两端对齐，基线对齐。但flex的容器增加了align-content的属性，能实现多行对齐。
子元素上都能设置放大的比例，都能自定义顺序。但flex增加了按比例缩小的flex-shrink属性，还有元素单独对其的align-self属性。还有控制子元素占据空间的flex-basis属性。
QQ截图20180126172324.png
一些难点：
什么是基线对齐？
基线对齐，其实就是每个子元素第一行文本下方的底线。将首行文本对齐后，整体往上移，直到有一个子元素碰到边界，确定下来的位置，就是基线的位置。
flex是flex-grow,flex-shrink,flex-basis的简写，当两个和三个一起用时，怎么理解它们的关系？
在box布局中，要么子元素宽是固定的，要么是可扩展的,二选一，但flex布局可以不这么干。flex-basis给子元素定义了一个原始的宽度值。如果这些宽度值加起来刚好是容器的宽，没有剩余，那么flex-grow和flex-shrink可以理解为没有起作用。flex-grow是定义如果宽度有多，能分到的比例。flex-shrink定义了如果宽度不够，应该减去的比例（这个比例是相对于多了或少了的总宽度，而不是元素本身的宽度）。
例如
.con{
width:100%;
height:100px;
width:400px;
display:flex;
flex-direction: row;
background-color: #f0f0f0;
}
.t{
height:100%;
}
<div class="con">
<div class="t" style="background-color:blue;flex-basis: 50px;flex-grow: 2;flex-shrink: 2;"> 1sd</div>
<div class="t" style="background-color:yellow;flex-basis: 50px;flex-grow:1;flex-shrink:1;">2fe</div>
<div class="t" style="background-color:green;flex-basis: 50px;flex-grow:1;flex-shrink:1;">3fd</div>
<div class="t" style="background-color:red;flex-basis: 50px;flex-grow:1;flex-shrink:1;">4se</div>
</div>
容器.con宽度为400,4个子元素的flex-basis都是50，加起来应该有50*4=200px，剩余200px宽度，4个元素的flex-grow分别是2,1,1,1,所以分到的宽度为80px,40px,40px,40px, 所以第一个元素为50+80=130px,其余为90px.
QQ截图20180126173303.png
同理，如果4个flex-basis都是150px,加起来有150*4=600px, 多处了200px,需要压缩宽度。4个元素的flex-shrink分别是2,1,1,1,分别需要压缩80px,40px,40px,40px,所以第一个元素为150-80=70px,其余为110px
QQ截图20180126173355.png
怎么理解flex-flow?
flex-flow是flex-direction和,flex-wrap的简写。可以理解为子元素向哪个轴方向流动(flex-direction),流动到末尾向哪个方向换行(flex-wrap)
关于flex伸缩
<div class="con">
<div class="t" style="background-color:blue;flex-basis:50px; flex-grow:1;flex-shrink:1;">
1sd
</div>
<div class="t" style="background-color:yellow; flex-grow:1;flex-shrink:1;">
2fe大幅缩水的粉丝的粉丝的
</div>
<div class="t" style="background-color:green;flex-basis:50px; flex-grow:1;flex-shrink:1;">
3fd
</div>
<div class="t" style="background-color:red;flex-basis:50px; flex-grow:1;flex-shrink:1;">
4se
</div>
</div>
如果增加其中一个子元素字符串的长度，并且没有使用word-break:all. 该子元素会被撑开，其它子元素则会收缩。至于撑开后尺寸怎么计算，比上面提到的要复杂。有谁知道的请留言。
QQ截图20180126173423.png
如果使用word-break:all 换行，则不会出现该情况。
QQ截图20180126173501.png
如果子元素同时定义了width,flex-grow,flex-shrink,当flex-grow或flex-shrink符合应用条件，width会不起作用。
网友评论