css3弹性盒模型

弹性盒模型

注意在使用弹性盒模型的时候，父元素必须要加display:box 或 inline-box

box-orient	定义盒模型的布局方向
horizontal	水平方向
vertical	垂直显示

box-direction	元素排列顺序
normal	正序
reverse	反序

box-ordinal-group	设置元素的具体位置

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .box {
        height: 100px;
        border: 10px solid #000;
        padding: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .box div {
        width: 100px;
        height: 100px;
        background: red;
        border: 1px solid #fff;
    }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

</html>

混序排列

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .box {
        height: 100px;
        border: 10px solid #000;
        padding: 10px;
        display: -webkit-box;
    }

    .box div {
        width: 100px;
        height: 100px;
        background: red;
        border: 1px solid #fff;
    }

    .box div:nth-of-type(1) {
        -webkit-box-ordinal-group: 2;
    }

    .box div:nth-of-type(2) {
        -webkit-box-ordinal-group: 4;
    }

    .box div:nth-of-type(3) {
        -webkit-box-ordinal-group: 1;
    }

    .box div:nth-of-type(4) {
        -webkit-box-ordinal-group: 5;
    }

    .box div:nth-of-type(5) {
        -webkit-box-ordinal-group: 3;
    }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

</html>

box-flex

定义盒子的弹性空间

子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值之和

例子：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .box {
        height: 100px;
        border: 10px solid #000;
        padding: 10px;
        display: -webkit-box;

    }

    .box div {
        width: 100px;
        height: 100px;
        background: red;
        border: 1px solid #fff;
         box-orient:horizontal;
    }

    .box div:nth-of-type(1) {
        -webkit-box-flex:1;
    }

    .box div:nth-of-type(2) {
        -webkit-box-flex:1;
    }

    .box div:nth-of-type(3) {
       width: 300px;
    }

    .box div:nth-of-type(4) {
         -webkit-box-flex:1;
    }

    .box div:nth-of-type(5) {
         -webkit-box-flex:1;
    }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

</html>

box-pack

对盒子富裕的空间进行管理


start	所有子元素在盒子左侧显示，富裕空间在右侧
end	所有子元素在盒子右侧显示，富裕空间在左侧
center	所有子元素居中
justify	富裕空间在子元素之间平均分布