CSS3弹性盒布局

古城微笑少年丶 2022-06-07 02:42 220阅读 0赞

> **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属性  
> ![这里写图片描述][SouthEast]

[SouthEast]: /images/20220607/c2a5cabe68f747ee90ddfcad0f24f4e2.png