介绍 & lt; !DOCTYPE html>
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt; title> CSS3 box-flex属性& lt;/title>
& lt;风格类型=拔谋?css"比;
身体
{
显示:-webkit-box;
-webkit-box-orient:水平;/*定义盒子元素内的元素从左到右流动显示*/宽度:200 px;
身高:150 px;
}
# box1
{
背景:红色;
-webkit-box-flex: 1.0;
}
# box2
{
背景:蓝色;
-webkit-box-flex: 2.0;
}
# box3
{
背景:橙色;
-webkit-box-flex: 1.0;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=癰ox1"祝辞& lt;/div>
& lt; div id=癰ox2"祝辞& lt;/div>
& lt; div id=癰ox3"祝辞& lt;/div>
& lt;/body>
& lt;/html>
这篇文章将为大家详细讲解有关CSS实现flexbox弹性盒子的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
在CSS3弹性盒子模型中,我们可以使用box-flex属性来定义弹性盒子内部的子元素是否具有弹性空间。如果子元素具有弹性空间,当弹性盒子(父元素)的尺寸放大或缩小的时候,具有弹性空间的子元素的尺寸也会放大或缩小。每当弹性盒子有额外的空间时,具有弹性空间的子元素也会扩大自身大小来填补这一空间。
说明:
box-flex属性取值是一个整数或者小数,不可为负数,默认值为0。
当盒子中包含多个定义了box-flex属性的子元素时,浏览器将会把这些子元素的box-flex属性值相加,然后根据它们各自的值占总值的比列来分配盒子剩余的空间。
注意,box-flex属性只有在弹性盒子确定了宽度或高度才有效。也就是说必须要先为父元素定义宽度或高度者属性值。
使用弹性空间设置,使得弹性盒子内部元素的总宽度和总高度,始终等于弹性盒子的宽度与高度。不过只有当弹性盒子具有确定的宽度或高度时,子元素的弹性空间才生效。
举例:
在浏览器预览效果如下:
分析:
这里使用box-orient:水平;“定义弹性盒子内部子元素水平排列,并且给弹性盒子指定了宽度为200 px。之后我们只需要使用box-flex属性给每一个子元素指定一个值,浏览器就会自动计算每个子元素所占的比例,自动划分宽度。
关于CSS实现flexbox弹性盒子的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
