CSS3盒模型display:box简述

display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

box-flex属性
box-flex主要让子容器针对父容器的宽度按一定规则进行划分

必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center);分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度600px分为6份，sectionOne占居父结构宽度的3/6即300px，sectionOne占居父结构宽度的2/6即200px，sectionThree占居父结构宽度的1/6即100px。

CSS3盒模型display:box简述

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8" />

    <style>

        .wrap{

            width:600px;

            height:200px;

            display:-moz-box;

            display:-webkit-box;

            display:box;

        }

        .sectionOne{

            background:orange;

            -moz-box-flex:;

            -webkit-box-flex:;

            box-flex:;

        }

        .sectionTwo{

            background:purple;

            -moz-box-flex:;

            -webkit-box-flex:;

            box-flex:;

        }

        .sectionThree{

            -moz-box-flex:;

            -webkit-box-flex:;

            box-flex:;

            background:green;

        }

    </style>

</head>

<body>

<article class="wrap">

    <section class="sectionOne">01</section>

    <section class="sectionTwo">02</section>

    <section class="sectionThree">03</section>

</article>

</body>

</html>

秒客网

CSS3盒模型display:box简述

相关文章