CSS3盒模型display:-webkit-box;的使用

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

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。

box-flex主要让子容器针对父容器的宽度按一定规则进行划分。举个栗子：

<!DOCTYPE html>

<html><meta charset="utf-8" />

<style>

.wrap {

    display: -webkit-box;

    -webkit-box-orient: horizontal;

}

.child {

    min-height: 200px;

    border: 2px solid #666;

    margin: 10px;

    font-size: 40px;

    font-weight: bold;

    font-family: Georgia;

    -webkit-box-align: center;

}

.w200 {width: 200px}

.flex1 {display:block;-webkit-box-flex: 3}

.flex2 {display:block;-webkit-box-flex: 1}

</style>

<div class="wrap">

    <!-- <div class="child w200">200px</div>

    <div class="child flex1">比例1</div>

    <div class="child flex2">比例2</div> -->

    <input type="text" class="child flex1" value="比例1">

    <input type="text" class="child flex2" value="比例2">

</div>

</html>

Ps:例如上面的child要求是块（block）元素才有效。

秒客网

CSS3盒模型display:-webkit-box;的使用

相关文章