一、注意
注意: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