css3布局方式一：box布局

一、注意

注意：box布局是2009提出的，flex布局2012年提出的，二者原理基本一致，flex可以说是box的新语法，但是不能相互替代，而且很关键的一点是二者兼容性不同，box兼容性更好，特别是对于移动端，所以还是有必要学习box布局的。

二、开始

随着移动端的崛起，现在是多端多分辨率的时代，前端工程师必须考虑页面的自适应。

自适应通常大家的反应都是用百分比布局，但局限还是比较多的，最常见的就是3个元素等分的时候，33%是折中的做法，针对这个问题，css3提供了一个很好的解决方案，就是 box-flex（设置或检索弹性盒模型对象的子元素如何分配其剩余空间）

设置父元素为 display:box;

然后设置子元素为 box-flex:n; n的值表示占 父元素剩余空间的n份。

兼容性：
IE10+、 Firefox4.0+、 Safari5.1+、 Chrome13.0+、 Opera11.50+

举最简单的一个例子：

<style>
    .box{ width:600px; display:-moz-box; display:-o-box;display:-webkit-box; display:-ms-flexbox; display:box; }
    .box li{ -moz-box-flex:1; -webkit-box-flex:1; -ms-flex:1; -o-box-flex:1; box-flex:1; height:50px; color:#fff; }
    .box li.a{ background:#993;  }
    .box li.b{ background:#399;  }
    .box li.c{ background:#939;  }
</style>
<ul class="box">
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
</ul>

效果如下：

每个li占一份，于是实现了真正的3等分！
现在改成 a-> box-flex:1，b-> box-flex:1，c-> box-flex:2
看看效果：

相信大家都明白了，但必须注意的是父元素剩余空间这句话的含义，其实它的意思是父元素剩余空间而不是整个父元素的空间。

看如下例子：

<style>
    .boxA{ width:600px; display:-moz-box;display:-o-box; display:-webkit-box; display:-ms-flexbox; display:box; }
    .boxA li{ width:100px; -moz-box-flex:1; -o-box-flex:1; -webkit-box-flex:1; -ms-flex:1; box-flex:1; height:50px; color:#fff; }
    .box li.a{ background:#993;  }
    .box li.b{ background:#399;  }
    .box li.c{ background:#939; -moz-box-flex:2; -o-box-flex:2;-webkit-box-flex:2; -ms-flex:2; box-flex:2; }
</style>
<ul class="boxA">
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
</ul>

这里代码和上面的区别在于设置了li宽度为100px。

效果如下：

因为每个li宽度都为100px，所以父元素boxA的剩余空间为：600-100×3 = 300px; 然后把剩余的300px 4等分，其中c占2分，所以结果为：

a： 100+(300/4)*1 = 175px

b： 100+(300/4)*1 = 175px

c： 100+(300/4)*2 = 250px