WonderCSS

利用 CSS3 新属性 box-flex 盒子模型进行等分示例

今天记录并介绍一下 CSS3 新添加的盒子模型属性 box-flex,主要让子容器针对父容器的宽度按一定规则进行划分。不过目前 box-flex 属性还没有得到firefox、Opera、chrome、ie浏览器的完全支持,但可以使用它们的私有属性来定义。ie 目前不支持,估计后续版本会兼容这个属性。

下面以示例做介绍,首先要知道在应用 box-flex 时必须给父容器定义 css 属性 display:box 其子容器才可以进行划分。


<style type="text/css">
.box {
     width:600px;
     height:100px;
     color:#fff;
     border:2px solid #333;
     display: -webkit-box;
     display: -moz-box;
     display:box;
}
.sbox1 {
     -moz-box-flex:3;
     -webkit-box-flex:3;
     box-flex:3;
     background-color:#006699;
}
.sbox2 {
     -moz-box-flex:2;
     -webkit-box-flex:2;
     box-flex:2;
     background-color:#6699CC;
}
.sbox3 {
     -moz-box-flex:1;
     -webkit-box-flex:1;
     box-flex:1;
     background-color:#FF6633;
}
</style>

<div class="box">
     <div class="sbox1">left</div>
     <div class="sbox2">center</div>
     <div class="sbox3">right</div>
</div>

示例得出效果为:

css3-display-box-example

依据效果我们可以看得出来由于三个子容器 sbox1-3 共同将父容器 box 分成了 3+2+1=6 份以横向排列。这里需要知道,这6份是依据父级容器 box 所剩 “自由空间” 来进行分配。如果将其中 sbox3 宽度给予实数 width:600px; 并去掉 box-flex 属性,那么 box 会先减去 sbox3 实数宽度后再给 sbox1 sbox2 划分。

默认情况是横向划分,如果要纵向划分那么需要给父级容器再添加样式 box-orient:vertical


.box {
     -moz-box-orient:vertical;
     -webkit-box-orient:vertical;
     box-orient:vertical;
}

了解了这个示例后我们或许想知道 CSS3 的新成员 box属性 到底都有什么呢?让我们 详细了解 CSS3 新成员 box 属性

By 于湛 发布于 2013.03.9 7,985 次浏览

利用 CSS3 新属性 box-flex 盒子模型进行等分示例》上有1条评论

  1. Pingback引用通告: 详细了解 CSS3 新成员 box 属性 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注