您的位置：首页 > Web前端 > CSS

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

2017-04-19 17:22 531 查看

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 的子元素。

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

<!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>

转自：http://blog.csdn.net/u013511989/article/details/47750613

补充：

制作响应式表格同理使用 display:table 即可

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航