温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中flexbox弹性盒子如何布局

发布时间:2022-03-23 13:46:58 来源:亿速云 阅读:115 作者:小新 栏目:web开发

小编给大家分享一下css中flexbox弹性盒子如何布局,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

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

说明:

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

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

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

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

举例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!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>

在浏览器预览效果如下:

css中flexbox弹性盒子如何布局

分析:

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

以上是“css中flexbox弹性盒子如何布局”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI