弹性盒模型机制研究及应用_赵韬.pdf

H J S F X Y X B9弹性盒模型机制研究及应用赵 韬1,刘美霞1,何志永2*(1.汉江师范学院,湖北 十堰 4 4 2 0 0 0;2.天津科技大学 人工智能学院,天津 3 0 0 2 2 2)摘 要 传统的页面布局可以通过设置元素的f l o a t、p o s i t i o n属性来完成,当页面需要适应不同的屏幕大小以及设备类型时,弹性盒模型提供了一种有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间,确保元素拥有恰当的行为.研究弹性盒模型渲染页面的机制,分析利用标准盒模型和弹性盒模型实现页面自适应布局的方法.关键词 弹性盒模型;自适应布局;页面设计 d o i1 0.1 9 5 7 5/j.c n k i.c n 4 2-1 8 9 2/g 4.2 0 2 2.0 6.0 0 3 中图分类号T P 3 9 3.0 9 2 文献标识码A 文章编号2 0 9 63 7 3 4(2 0 2 2)0 60 0 0 90 31 创建弹性盒子 当一个元素的d i s p l a y1属性值为f l e x或者i n l i n e-f l e x时,该元素被称为弹性容器(f l e xc o n t a i n e r),d i s p l a y属性值为f l e x的弹性容器具有块元素的特征,d i s p l a y属性值为i n l i n e-f l e x的弹性容器具有行内元素的特征.其所有子元素将被自动转换成弹性项目(f l e xi t e m),同时f l o a t、c l e a r、v e r t i c a l-a l i g n属性会失效,所有项目可以按照弹性盒模型的规则进行布局.f l e x i t e m f l e x i t e m f l e x i t e m f l e x i t e m上面 代 码 中 的d i v元 素 在 添 加d i s-p l a y:f l e x属性后,就成为了弹性容器,其所有子元素由行内元素变成块状弹性项目(d i s p l a y属性值由i n l i n e变成b l o c k).2 弹性盒模型机制 弹性容器存在两条轴:水平方向的主轴2(m a i na x i s)和 垂 直 方 向 的 交 叉 轴(c r o s sa x i s),如图1所示.可以通过修改弹性容器的f l e x-d i r e c t i o n属性值,使垂直方向变为主轴,水平方向变为交叉轴.图1弹性盒模型2.1 弹性项目的排列方式 默认情况下,弹性容器的f l e x-d i r e c-t i o n属性值为r o w,主轴为水平方向,起点(m a i ns t a r t)在容器左端,弹性项目按照从左到右的顺序排列.如果弹性项目的宽度总和小于容器宽度,弹性项目的宽度为其被设置的宽度.如果弹性项目的宽度总和大于容器宽度,弹性项目根据其被设置的宽度的比例来划分并占据相应的容器宽度.2 0 2 2年1 2月汉江师范学院学报D e c.2 0 2 2第4 2卷第6期J o u r n a l o fH a n j i a n gN o r m a lU n i v e r s i t yV o l.4 2 N o.6 收稿日期2 0 2 2-0 8-1 9 基金项目 汉江师范学院校级教研项目“计算机专业创新性应用人才培养方式研究”(项目编号:2 0 1 6 0 1 4)阶段性研究成果.作者简介 赵 韬(1 9 8 2-),男,湖北十堰人,汉江师范学院经济与管理学院副教授,硕士,主要从事计算机应用技术研究.通讯作者:何志永,天津科技大学人工智能学院,E-m a i l:h e z y 8 2 t u s t.e d u.c n.H J S F X Y X B1 0 f l e x i-t e mf l e x i t e m f l e xi t e m f l e xi t e m图2弹性项目排列方式 弹性项目e m、s t r o n g、i n s、s p a n设置的宽度 分 别 是2 0 0 p x、4 0 0 p x、6 0 0 p x、8 0 0 p x(1:2:3:4).因此,在宽度为1 0 0 0 p x的弹性容器中各项目分配的宽度如图2所示,分别为1 0 0 p x、2 0 0 p x、3 0 0 p x、4 0 0 p x.f l e x-d i r e c t i o n属 性 值 为r o w-r e-v e r s e时,主轴为水平方向,起点在容器右端,弹性项目按照从右到左的顺序排列.f l e x-d i r e c t i o n属性值为c o l u m n时,主轴为垂直方向,起点在容器顶端,弹性项目按照从上到下的顺序排列.如果弹性项目的高度总和小于容器高度时,弹性项目的高度为其被设置的高度.如果弹性项目的高度总和大于容器宽度,弹性项目根据其被设置的高度的比例来划分并占据相应的容器高度.f l e x-d i r e c t i o n属性值为c o l u m n-r e-v e r s e时,主轴为垂直方向,起点在容器底端,弹性项目按照从下到上的顺序排列.2.2 弹性项目的换行方式 默认情况下,弹性容器的f l e x-w r a p属性值为n o w r a p,表示不换行.f l e x-w r a p属性值为w r a p时,如果弹性项目的宽度总和小于容器宽度,不换行;如果弹性项目的宽度总和大于容器宽度,换行,并且第一行在最上方.在上面代码的基础上,为弹性容器添加f l e x-w r a p:w r a p属性,将产生换行效果,如图3所示.图3弹性项目换行方式 f l e x-w r a p属性值为w r a p-r e v e r s e时,如果弹性项目的宽度总和大于容器宽度,换行,并且第一行在最下方.2.3 弹性项目在主轴的对齐方式 如果弹性项目沿主轴方向的尺寸总和小于容器主轴尺寸,通过设置弹性容器的j u s t i f y-c o n t e n t属性可以改变弹性项目主轴的对齐方式.例如,图4中容器的j u s t i f y-c o n t e n t属性值为s p a c e-b e t w e e n,弹性项目被均匀排列,首个元素放置于主轴起点,末尾元素放置于主轴终点.f l e x i-t e mf l e x i t e m f l e xi t e m f l e xi t e m图4弹性项目在主轴上的对齐方式2.4 弹性项目在交叉轴的对齐方式 如果弹性项目沿交叉轴方向的尺寸总和小于容器交叉轴尺寸,通过设置弹性容器的a l i g n-i t e m s属性可以改变弹性项目在交叉轴的对齐方式.默认情况下,弹性容器的a l i g n-i t e m s属性值为s t r e t c h,交叉轴在垂直方向时,如果弹性项目没有设置高度,其高度会被拉伸至弹性容器的高度;交叉轴在水平方向时,如果弹性项目没有设置宽度,其宽度会被拉伸至弹性容器的宽度.3 弹性盒模型在自适应布局中的应用 标准的盒模型3把所有HTML元素都看作一 个 盒 子,包 含 有 四 个 属 性:c o n-t e n t、p a d d i n g、b o r d e r和m a r g i n.如果要实现自适应布局,可以使用浮动定位或者层定位的方法.赵 韬,刘美霞,何志永:弹性盒模型机制研究及应用H J S F X Y X B1 13.1 利用浮动定位实现宽度自适应布局 设置外层d i v父容器(i d=b o x)的高度为6 0 0 p x,宽度为1 0 0%.设置i d=l e f t 的d i v子元素为左浮动(f l o a t:l e f t;),宽度为6 0 0 p x,高度为1 0 0%(与父元素高度相等).通过触发i d=r i g h t 的d i v元 素 的B F C规则(将o v e r f l o w属性值设置为h i d-d e n),使其左边界紧贴浮动元素的右边界,即可实现左侧宽度固定,右侧宽度自适应的页面布局,如图5所示.图5宽度自适应布局3.2 利用层定位实现宽度自适应布局 设置外层d i v父容器(i d=b o x)的高度为6 0 0 p x,宽度为1 0 0 v w,p o s i t i o n属性值为r e l a t i v e(相对定位).设置i d=l e f t 的d i v子元素的高度为1 0 0%(与父元素高度相等),p o s i t i o n属性值为a b s o l u t e4(绝对定位).设置i d=r i g h t 的d i v子元素的高度为1 0 0%,宽度值通过计算为c a l c(1 0 0 v w-6 0 0 p x),p o s i t i o n属性值为a b s o l u t e(绝对定位),l e f t属性值为6 0 0 p x,t o p属性值为0,也可实现与上例相同的自适应布局效果.上述两种自适应布局方法中的外层父容器都是基于标准盒模型,使用浮动定位(f l o a t:l e f t;)的元素和使用绝对定位(p o s i-t i o n:a b s o l u t e;)的元素都会脱离文档流,并会对其周围的元素产生影响.使用弹性盒模型不仅可以实现宽度自适应布局,而且可以避免元素脱离文档流.3.3 利用弹性盒实现宽度自适应布局 设置外层d i v元素为弹性容器,高度为6 0 0 p x,宽度为1 0 0%.主轴为水平方向.第一个d i v子元素的宽度设置为6 0 0 p x,第二个d i v子元素的f l e x-g r o w属性值设置为1,父元素的剩余空间会全部分配给第二个子元素,以实现左侧宽度固定,右侧宽度自适应的布局.结 语 弹性盒模型中元素伸展和收缩的特性,使其能够动态响应父元素的尺寸变化5,并保持一定的结构特征.弹性布局技术的出现一方面使得网页布局形式变得更加丰富多样,另一方面也从技术层面为越来越多、越来越复杂的市场需求提供了解决方案.参考文献1 美A d a m F r e e m a n著,谢廷晟,牛化成,刘美英译.HTML 5权威指南M.北京:人民邮电出版社,2 0 1 4.2 陈桂霞.F l e x b o x弹性布局与移动页面适应J.信息技术与信息化,2 0 2 0,(1 0).3 林文如,林文忠,刘镭.基于弹性盒子模型的跨平台手机应用界面布局J.苏州大学学报(工科版),2 0 1 2,3 2(0 5).4 梁艳玲.基于HTML+C S S网页布局定位参数研究J.吕梁学院学报,2 0 2 2,1 2(0 2).5 张亚南.多终端动态网站构建工具的研究与实现D.北京:北京邮电大学,2 0 1 9.【编校:胡军福】M e c h a n i s m R e s e a r c ha n dAp pl i c a t i o no fF l e x i b l eB o xM o d e lZ HAO-T a o1,L I U M e i-x i a1,HEZ h i-y o n g2(1.H a n j i a n gN o r m a lU n i v e r s i t y,S h i y a n4 4 2 0 0 0,C h i n a;2.S c h o o l o fA r t i f i c i a l I n t e l l i g e n c e,T i a n j i nU n i v e r s i t yo fS c i e n c ea n dT e c h n o l o g y,T i a n j i n3 0 0 2 2 2,C h i n a)A b s t r a c t:T h e t r a d i t i o n a l p a g e l a y o u t c o u l db ed o n eb ys e t t i n gt h ep r o p