CSS3属性box-flex

最新推荐文章于 2024-11-12 08:41:57 发布

谁动了我的奥利奥

最新推荐文章于 2024-11-12 08:41:57 发布

阅读量713

点赞数 1

分类专栏： web前端文章标签： css3 firefox chrome css 浏览器

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

一、box-flex属性

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

html代码：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;
}
.sectionThree{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background:green;
}

展示效果：这里写图片描述

说明：必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center);分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度600px分为6份，sectionOne占居父结构宽度的3/6即300px，sectionOne占居父结构宽度的2/6即200px，sectionThree占居父结构宽度的1/6即100px。

以上是按比例数进行划分分配的，如果其中一个子容器或多个子容器设置了固定宽度又会怎样划分那？

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

HTML代码：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
}
.sectionThree{
    width:200px;//设置固定宽度
    background:green;
}

展示效果：这里写图片描述

说明：sectionThree设置了固定宽度为200px，父容器的宽度600px减去改子容器的200px还剩下400px，这400px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。

在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分的那？接着看

CSS代码：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
        margin:0px 50px;//添加margin属性
}
.sectionThree{
    width:200px;
    background:green;
}