使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局

来源：互联网发布：计算器vb程序代码编辑：程序博客网时间：2024/05/17 03:13

box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。

display:box
必须给父容器wrap定义css属性display:box其子容器才可以进行划分
注意：如果定了display:box则该容器则定义为了内联元素，使用margin:0 auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center

box-flex:value
box-flex 属性规定框的子元素是否可伸缩其尺寸。box-flex: value;元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

如果其中一个子容器或多个子容器设置了固定宽度，其它子容器没有设置，其计算方式是这样的：子容器如果设置了固定宽度值，该子容器则直接应用设置的宽度值，其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度，在剩下的宽度基础上按一定比例进行划分分配。

实例：
下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。

实现：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3 box-orient</title>    <style type="text/css">    body,    div {        margin: 0;        padding: 0;    }        .box {        width: 100%;        background-color: #659C9B;        overflow: hidden;        display: -moz-box;        display: -webkit-box;        display: -o-box;        display: box;    }        .item {        margin: 10px 10px 10px 0;        height: 40px;        line-height: 40px;        padding-left: 10px;        background-color: #EEEEEE;        -webkit-box-flex: 1;        /*规定框的子元素可伸缩其尺寸。*/    }        .item:first-child {        margin-left: 10px;        width: 200px;        -webkit-box-flex: 0;        /*规定框的子元素不可伸缩其尺寸。*/    }    </style></head><body>    <div class="box">        <div class="item">column 1</div>        <div class="item">column 2</div>        <div class="item">column 3</div>    </div></body></html>

0 0