教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

弹性盒布局简介【web前端文章】

更新时间:2021年01月22日18时50分 来源:传智教育 浏览次数:

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

1611310205123_21.png

图1 弹性盒结构

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

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

表1 浏览器支持情况

什么是弹性盒布局




猜你喜欢:

弹性盒布局的4种常用属性演示【前端技术文章】

页面怎样排排版更加美观?如何清除浮动标签?

移动端如何单独开发不同于pc端的页面?

传智教育web前端课程