CSS3弹性盒模型布局模块

最新推荐文章于 2023-12-06 19:45:11 发布

a664864687

最新推荐文章于 2023-12-06 19:45:11 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/theEndOfSummer/p/4971130.html

版权

原文：http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/

一个简单的例子

当我们想要显示一个三栏布局，我们会这样做:

<div class="flex-container">
    <div class="col-1">I am column 1</div>
    <div class="col-2">I am column 2</div>
    <div class="col-3">I am column 3</div>
</div>

.flex-container {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
}

我们使用display属性把容器元素设为 box,然后我们用box-orient属性,将它设置水平(你也可以使用vertical设为垂直)。

用这个方法,直接子元素(如<div class=”col-1″>等)将被一个接一个水平放置,它们的宽度由它们的内容决定。但是如果我们想用自适应的方法让它们扩展到整个容器元素的宽度该怎么办呢?那么我们就需要为它们设置box-flex:

.col-1 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}
.col-2 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}
.col-3 {
    -moz-box-flex: 2;
    -webkit-box-flex: 2;
    box-flex: 2;

}

box-flex属性的值是指父容器中除了子容器以外的剩余空间如何被子容器分割,就像佐伊评论的,数字越大分到的越多。这也意味着每个元素的padding不会额外增加它的宽度(不错吧?)。

转载于:https://www.cnblogs.com/theEndOfSummer/p/4971130.html