CSS3弹性盒布局

最新推荐文章于 2025-07-07 14:25:26 发布

原创最新推荐文章于 2025-07-07 14:25:26 发布 · 892 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #弹性盒模型

前端专栏收录该内容

73 篇文章

订阅专栏

本文介绍了如何使用盒模型和弹性布局来控制网页元素的显示顺序、排列方向及自适应高度和宽度。通过设置不同的属性值，可以实现元素的灵活布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

box-fiex兼容性的写法
-webkit-box-flex : ;（Safari浏览器，chrome浏览器)
-moz-box-flex: ;（Firefox浏览器）

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>
            本地存储
        </title>
        <style>
            #all{
                background-color: red;
                //让它变成盒布局
                display:-moz-box;
                display : -webkit-box;
            }
        #a{
            width : 500px;
            background-color: #7FFFD4;
            margin : 20px;
        }
            #b{
            background-color: brown;
            margin : 20px;
            -webkit-box-flex : 1;
            -moz-box-flex: 1;
        }
            #c{
                width : 200px;
            background-color: antiquewhite;
            margin : 20px;

        }
        #a, #b,#c{
        -webkit-box-sizing:border-box ;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }
        </style>
        <script type="text/javascript" src="js/canvas.js"></script>
    </head>
    <body>
        <div id="all">
        <div id="a">
框架眼镜和硬性角膜接触镜（角膜塑形镜、rgp</div>
    <div id="b">
        光飞秒ifs150等）和ICL晶体植入术。
    </div>
    <div id="c">
        光飞秒ifs150等）和ICL晶体植入术。
    </div >
    </div>
    </body>
</html>

改变元素的显示顺序
使用弹性和模型的时候可以通过box-ordinal-group属性来改变各个元素的显示顺序
兼容性的写法如下：
-webkit-box-ordinal-group: ;（Safari浏览器，chrome浏览器)
-moz-box-ordinal-group: ;（Firefox浏览器）

如上，我们可以通过写下面的代码可以实现改变他们的顺序

//这里的数字代表他们的顺序
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group:1 ;

改变元素的排列方向
在使用弹性盒布局的时候可以通过box-orient来指定多个元素的排列方向

如下，我们可以通过写下面的代码可以实现改变他们的排列的方向

//这里是让他垂直排列的
-webkit-box-orient: vertical;
-moz-box-orient: vertical;

盒模型元素的高度和宽度是自适应的

使用弹性盒布局类清除空白
就是给盒子加入一个box-flex属性