css3 box-flex属性（弹性盒子）学习笔记

作者: 罂粟1995 | 来源:发表于2018-05-13 15:49 被阅读0次

弹性盒子是 CSS3 的一种新的布局模式。

当页面需要适应不同的屏幕大小以及设备类型时，使用弹性盒子布局模式可以确保元素拥有恰当的行为。

使用场景1

将一个div划分成多份，每一份占有某比例的宽度，无论在任何大小的设备屏幕上，此比例都保持不变。
代码：

<!doctype html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .father_box{
                display: -moz-box; 
                display: -webkit-box; 
                display: box; 
                height:300px;
            }
            .child_box_one{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:red;
            }
            .child_box_two{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:blue;
            }
            .child_box_three{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:yellow;
            }
        </style>
    </head>
    <body>
        <div class="father_box">
            <div class="child_box_one">1</div>
            <div class="child_box_two">2</div>
            <div class="child_box_three">3</div>
        </div>
    </body>
</html>

首先父元素必须添加必要的声明：display:box或者display:inline-box；
三个并列的子元素每一个都声明了box-flex: 1;，这说明每一个子div都将占据父div的三分之一容量。
结果：

image.png

使用场景2

将一个div划分成多份，其中有一份的宽度是固定的，除定宽的这份之外其他的每一份占有余下容量的某比例的宽度，无论在任何大小的设备屏幕上，此比例都保持不变。
代码：

<!doctype html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .father_box{
                display: -moz-box; 
                display: -webkit-box; 
                display: box; 
                height:300px;
            }
            .child_box_one{
                /*-moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;*/
                width:30px;
                background-color:red;
            }
            .child_box_two{
                -moz-box-flex: 2; 
                -webkit-box-flex: 2; 
                box-flex: 2;
                background-color:blue;
            }
            .child_box_three{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:yellow;
            }
        </style>
    </head>
    <body>
        <div class="father_box">
            <div class="child_box_one">1</div>
            <div class="child_box_two">2</div>
            <div class="child_box_three">3</div>
        </div>
    </body>
</html>

结果：

image.png

如图所示，第一个子div——child_box_one固定占有30px的宽度，剩下两个子div按2:1的比例分配父div宽度减掉30px后剩下的容量。

margin和padding的影响

如果某一个子div增加了magin/padding的属性，应该是先用可分配宽度减去margin/padding的宽度，剩下的宽度再按相应的比例分配给不同的子div。
代码：

<!doctype html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .father_box{
                display: -moz-box; 
                display: -webkit-box; 
                display: box; 
                height:300px;
            }
            .child_box_one{
                /*-moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;*/
                width:30px;
                background-color:red;
            }
            .child_box_two{
                -moz-box-flex: 2; 
                -webkit-box-flex: 2; 
                box-flex: 2;
                background-color:blue;
                margin:0 30px;
            }
            .child_box_three{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:yellow;
            }
        </style>
    </head>
    <body>
        <div class="father_box">
            <div class="child_box_one">1</div>
            <div class="child_box_two">2</div>
            <div class="child_box_three">3</div>
        </div>
    </body>
</html>

结果：

image.png

可以看到，定宽的红色div宽度不变，虽然我们只给蓝色div加了margin，但事实上蓝色div和黄色div的分配到的宽度都减少了。

父标签的可选属性:box-orient

box-orient用来确定子元素的方向，是横着排还是竖着走。可选的值有：
horizontal | vertical | inline-axis | block-axis | inherit
例如：

<!doctype html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .father_box{
                display: -moz-box; 
                display: -webkit-box; 
                display: box; 
                height:400px;
                -moz-box-orient:vertical; 
                -webkit-box-orient:vertical; 
                -o-box-orient:vertical; 
                box-orient:vertical; 
            }
            .child_box_one{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:red;
                width: 100px;
            }
            .child_box_two{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:blue;
                width: 100px;
            }
            .child_box_three{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:yellow;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <div class="father_box">
            <div class="child_box_one">1</div>
            <div class="child_box_two">2</div>
            <div class="child_box_three">3</div>
        </div>
    </body>
</html>

结果：

image.png
父div中设置box-orient:vertical;子div就变成纵向排列了。

父标签的可选属性:box-align

直接看代码吧：
box-align属性设置为top时：

<!doctype html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .father_box{
                display: -moz-box; 
                display: -webkit-box; 
                display: box; 
                height:300px;
                -moz-box-align:top; 
                -webkit-box-align:top; 
                -o-box-align:top; 
                box-align:top; 
            }
            .child_box_one{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:red;
                height:100px;
            }
            .child_box_two{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:blue;
                height:200px;
            }
            .child_box_three{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:yellow;
                height:100px;
            }
        </style>
    </head>
    <body>
        <div class="father_box">
            <div class="child_box_one">1</div>
            <div class="child_box_two">2</div>
            <div class="child_box_three">3</div>
        </div>
    </body>
</html>

结果：

image.png

可以看到三个子div是顶部对齐的。

box-align属性设置为center时：

<!doctype html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .father_box{
                display: -moz-box; 
                display: -webkit-box; 
                display: box; 
                height:300px;
                -moz-box-align:center; 
                -webkit-box-align:center; 
                -o-box-align:center; 
                box-align:center; 
            }
            .child_box_one{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:red;
                height:100px;
            }
            .child_box_two{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:blue;
                height:200px;
            }
            .child_box_three{
                -moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;
                background-color:yellow;
                height:100px;
            }
        </style>
    </head>
    <body>
        <div class="father_box">
            <div class="child_box_one">1</div>
            <div class="child_box_two">2</div>
            <div class="child_box_three">3</div>
        </div>
    </body>
</html>

结果：

image.png

可以看到，三个子div是居中对齐的。

父标签的可选属性:box-pack

box-align控制了子div垂直方向上的对齐方式，box-pack则控制了子div水平方向上的对齐方式，可选值有：start | end | center | justify。
例如：justify属性值控制子div两端对齐：

<!doctype html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .father_box{
                display: -moz-box; 
                display: -webkit-box; 
                display: box; 
                height:300px;
                -moz-box-pack:justify; 
                -webkit-box-pack:justify; 
                -o-box-pack:justify; 
                box-pack:justify; 
            }
            .child_box_one{
                /*-moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;*/
                background-color:red;
            }
            .child_box_two{
                /*-moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;*/
                background-color:blue;
            }
            .child_box_three{
                /*-moz-box-flex: 1; 
                -webkit-box-flex: 1; 
                box-flex: 1;*/
                background-color:yellow;
            }
        </style>
    </head>
    <body>
        <div class="father_box">
            <div class="child_box_one">hahahaha1</div>
            <div class="child_box_two">hahahaha2</div>
            <div class="child_box_three">hahahaha3</div>
        </div>
    </body>
</html>

结果：

image.png

若将属性值改为end，效果则是：

image.png

参考文章：http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/

css3 box-flex属性（弹性盒子）学习笔记

使用场景1

使用场景2

margin和padding的影响

父标签的可选属性:box-orient

父标签的可选属性:box-align

父标签的可选属性:box-pack

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读