学科分类

什么是弹性盒布局

使用弹性盒布局(Flexible Box)可以轻松地创建响应式网页布局,为盒状(块)模型增加了灵活性。弹性盒改进了块模型,既不使用浮动,也不会合并弹性盒容器与其内容之间的外边距。它是一种非常灵活的布局方法,就像几个小盒子放在一个大盒子里一样,相对独立,容易设置。下面我们看一下弹性盒的结构,如图1所示。

img

图1 弹性盒结构

从图1可以看出,弹性盒由容器、子元素和轴构成,并且默认情况下,子元素的排布方向与横轴的方向是一致的。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求,它的优势在于开发人员只是声明布局应该具有的行为,而不需要给出具体的实现方式。浏览器会负责完成实际的布局。

弹性盒模型几乎在主流浏览器中都得到了支持,如表1所示。

表1 浏览器支持情况

iOS Safari Android Browser IE Opera Chrome Firefox
7.0+ 4.4+ 11+ 12.1+ 21+ 22+
点击此处
隐藏目录