网页布局——Box盒子

• 在移动端开发的时候，圣杯布局，弹性盒，是我们经常会用得到的，W3C很久以前就有一个display:box属性

• flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-box
• display: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/
• display: flex 使用可以参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• 兼容性的问题可以参考https://css-tricks.com/old-flexbox-and-new-flexbox/
• Android UC浏览器只支持display: box语法。而iOS UC浏览器则支持两种方式 
• 需要注意的是如果要使用line-clamp时需要用display:box

display:-webkit-box;父元素设置该属性后，作用与display:flex类似，子元素可在一行显示，且实现自适应。

演示:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 400px;
            height: 600px;
            display: -webkit-box;
            -webkit-box-orient: vertical;/* 竖向排列 */
        }
        .child-one{
            background: lightblue;
            -webkit-box-flex: 1;
        }
        .child-two{
            background: lightgray;
            -webkit-box-flex: 2;
        }
        .child-three{
            background: lightgreen;
            /* 加了固定的高度和边距 */
            height: 200px;
            margin: 15px 0;
        }
    </style>

<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
    <div class="parent">
        <div class="child-one">1</div>
        <div class="child-two">2</div>
        <div class="child-three">3</div>
    </div>
</div>

效果如下:

　　　　　　

那么到这里有人会说，display:-webkit-box;与display:flex究竟有什么区别呢？

如果要说区别，display：box； 是老规范，要兼顾古董机子就加上它。
flexbox flex 是新规范，老机子不支持的

1.下面来属性对照俩者之间属性：

display:box;	display:flex	说明
box-orient: horizontal | vertical | inherit	flex-direction:row | column	该属性定义父元素的子元素是如何排列的。
box-direction:normal | reverse	flex-direction:row-reverse | row-reverse	作用使改变子元素的排列顺序
box-pack: start | end | center | justify	justify-content:flex-start | flex-end | center | space-between|space-around	该属性定义父元素的子元素是水平排列的
box-align: start | end | center | baseline | stretch	align-items:flex-start | flex-end | center | baseline | stretch	该属性定义父元素的子元素是垂直排列的
box-flex:<number>	flex:是flex-grow, flex-shrink 和 flex-basis的简写	该属性让子容器针对父容器的宽度按一定规则进行划分
box-ordinal-group:使用需加前缀	order:  <number>	子项目的排列顺序，数值越小排列越靠前
box-lines:已被淘汰	flex-wrap：nowrap | wrap | wrap-reverse	子项目在容器内的换行结果

                                                              

 此处有很多flex的属性尚未写到，可参考我的另一篇博文详解介绍了语法属性详解

tip:box属性基本上需加上不同的浏览器前缀方可正式使用

2.display:flex和display:box布局浏览器兼容性分析

可参考资料：https://www.cnblogs.com/walk-on-the-way/p/5997073.html

总的来说，不考虑IE浏览器的话，PC端上使用哪个都可以，一般使用display:flex；移动端的安卓的UC只支持display:box，iOS的UCdisplay:box和display:flex两个都支持。

在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。

兼容性浏览器写法：

.container{
　　　　display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
　　　　display: -moz-box; /* Firefox 17- */
　　　　display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
　　　　display: -moz-flex; /* Firefox 18+ */
　　　　display: -ms-flexbox; /* IE 10 */
　　　　display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}