本篇文章给大家带来的内容是关于flexbox弹性盒子如何布局?详细教程,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在CSS3弹性盒子模型中,我们可以使用box-flex属性来定义弹性盒子内部的子元素是否具有弹性空间。如果子元素具有弹性空间,当弹性盒子(父元素)的尺寸放大或缩小的时候,具有弹性空间的子元素的尺寸也会放大或缩小。每当弹性盒子有额外的空间时,具有弹性空间的子元素也会扩大自身大小来填补这一空间。

说明:

box-flex属性取值是一个整数或者小数,不可为负数,默认值为0。

当盒子中包含多个定义了box-flex属性的子元素时,浏览器将会把这些子元素的box-flex属性值相加,然后根据它们各自的值占总值的比列来分配盒子剩余的空间。

注意,box-flex属性只有在弹性盒子确定了宽度或高度才有效。也就是说必须要先为父元素定义width或者height属性值。

使用弹性空间设置,使得弹性盒子内部元素的总宽度和总高度,始终等于弹性盒子的宽度与高度。不过只有当弹性盒子具有确定的宽度或高度时,子元素的弹性空间才生效。

举例:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS3 box-flex属性</title>     <style type="text/css">         body         {             display:-webkit-box;             -webkit-box-orient:horizontal;   /*定义盒子元素内的元素从左到右流动显示*/             width:200px;             height:150px;         }         #box1         {             background:red;             -webkit-box-flex:1.0;         }         #box2         {             background:blue;             -webkit-box-flex:2.0;         }         #box3         {             background:orange;             -webkit-box-flex:1.0;         }     </style> </head> <body>     <div id="box1"></div>     <div id="box2"></div>     <div id="box3"></div> </body> </html>

在浏览器预览效果如下:

flexbox弹性盒子如何布局?详细教程

分析:

这里使用“box-orient:horizontal;”定义弹性盒子内部子元素水平排列,并且给弹性盒子指定了宽度为200px。之后我们只需要使用box-flex属性给每一个子元素指定一个值,浏览器就会自动计算每个子元素所占的比例,自动划分宽度。

标签
DT素材网

DT素材网

140

0

0

( 此人很懒并没有留下什么~~ )