display:box-css教程-PHP中文网

首页

web前端

css教程

display:box

高洛峰

Oct 29, 2016 pm 01:33 PM

display:box;是css3新添加的盒子模型属性，经典的布局应用就是布局的垂直等高、水平均分、按比例划分。

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

一、box-flex属性

1.水平等宽盒子

代码：

<html>
<head>
<style>
.wrap{
    width:600px;
    height:200px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
}
.sectionOne{
    background:orange;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionTwo{
    background:purple;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionThree{
    background:green;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
</style>
</head>
<body>
<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>
</body>
</html>

展示效果：

说明：父元素样式必须使用display:box;才可以对子元素在父容器内进行划分；子元素样式使用box-flex属性指定在父容器中所占比例（份数）。以上是等宽划分，三个子容器属性box-flex:1;总共将父容器按宽度均分为三份，所以子容器是等宽划分。

注意：如果定了display:box则该容器则定义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center。

2.自定义划分宽度比例

将上述CSS代码中box-flex:1;改变为不同的占比。

代码

.sectionOne{
    background:orange;
    width:300px;//设置固定宽度
}

展示效果：

如果设置了margin，则margin也算在定宽内，剩下宽度进行划分。

代码（上面代码改）：

<style>
.wrap{
    width:600px;
    height:200px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
    text-align:center;
}
.sectionOne{
    background:orange;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionTwo{
    background:purple;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    margin:0 50px;//添加margin宽度
}
.sectionThree{
    background:green;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
</style>

展示效果：

每块的宽度是减掉左右margin：100px之后的166.7px,而不是200px，在布局上也是等分布。

二、box其他属性

其他属性包括：box-orient | box-direction | box-align | box-pack | box-lines。

1.box-orient属性作用：确定父元素里子元素的排列方式，是水平还是垂直。

属性值：horizontal | vertical | inline-axis | block-axis | inherit。

如果父元素box-orient:horizontal;或box-orient:inline-axis;，对子元素进行水平排列，就是对父元素的宽度进行划分。（此时如果父元素定义了高度值，其子元素的高度值设置则无效状态，所有子元素的高度等于父元素的高度值；如果父元素不设置高度值，其子元素的高度值才有效并且取最大高度值的子元素的高度。）亲测子元素的高度会溢出父元素设置的高度，并且每个子元素持有自己设置的高度，不一致，括号里的说明待查证，代码和展示效果如下。

代码：

<style>
.wrap{
    width:600px;
    height:200px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
    text-align:center;
    -moz-box-orient:inline-axis;
    -webkit-box-orient:inline-axis;
}
.sectionOne{
    background:orange;
    height:100px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionTwo{
    background:purple;
    height:200px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionThree{
    background:green;
    height:300px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
</style>

展示效果：

如果父元素box-orient:vertica;l或box-orient:block-axis;(此属性是默认值)，对子元素进行垂直排列，就是对父元素的高度进行划分。（此时如果父元素定义了宽度值，其子元素的宽度值设置则无效状态；如果父元素不设置宽度值，其子元素的宽度值才有效并且取最大宽度值的子元素的宽度。）同上，亲测子元素的宽度会溢出父元素设置的高度，并且每个子元素持有自己设置的宽度，不一致，括号里的说明待查证，代码和展示效果如下。

代码：

<style>
.wrap{
    width:600px;
    height:200px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
    text-align:center;
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
}
.sectionOne{
    background:orange;
    width:500px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionTwo{
    background:purple;
    width:600px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionThree{
    background:green;
    width:700px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
</style>

展示效果：

box-orient:inherit;为继承父元素的该值设置。

2、box-direction

属性作用：确定父元素里的子元素排列顺序，是正常顺序还是反转顺序。

属性值：normal | reverse | inherit。

该属性值很好理解，父元素属性box-direction:normal;指按照html标签的正常顺序排列子元素，box-direction:reverse;指按照反转（反序）顺序排列子元素，box-direction:inherit;指继承父元素的改值。直接给出展示效果。

展示效果（正序）：

展示效果（反序）：

3.box-align

属性作用：确定父元素里面子元素的垂直对齐方式。

属性值：start | end | center | baseline | stretch。

box-align:start;表示子元素居顶对齐，展示效果：

box-align:end;表示子元素居底对齐，展示效果：

box-align:center;表示子元素居中对齐，展示效果：

4、box-pack

属性作用：确定父元素里面定宽子元素的水平对齐方式。

属性值：start | end | center | justify。

代码：

<style>
.wrap{
    width:600px;
    height:200px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
    text-align:center;
    border:1px solid brown;
    -webkit-box-pack:justify;
}
.wrap section{
    width:100px;  
}
.sectionOne{
    background:orange;
}
.sectionTwo{
    background:purple;
}
.sectionThree{
    background:green;
}
</style>

box-pack:start;表示子元素整体水平居左对齐，展示效果：

box-pack:end;表示子元素整体居右对齐，展示效果：

box-pack:center;表示子元素整体居中对齐，展示效果：

box-pack:justify;表示子元素水平等分父元素宽度，展示效果：

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

这不应该发生：对不可能进行故障排除May 15, 2025 am 10:32 AM

解决这些不可能的问题之一，这是您从未想过的其他问题的问题。

@KeyFrames vs CSS过渡：有什么区别？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用页面CMS进行静态站点内容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的内容管理系统选项可用，而我进行了几个测试，但实际上没有一个是一个，y＆＃039;知道吗？怪异的定价模型，艰难的自定义，有些甚至最终成为整个＆

链接HTML中CSS文件的最终指南May 13, 2025 am 12:02 AM

链接CSS文件到HTML可以通过在HTML的部分使用元素实现。1)使用标签链接本地CSS文件。2)多个CSS文件可通过添加多个标签实现。3)外部CSS文件使用绝对URL链接，如。4)确保正确使用文件路径和CSS文件加载顺序，优化性能可使用CSS预处理器合并文件。

CSS Flexbox与网格：全面评论May 12, 2025 am 12:01 AM

选择Flexbox还是Grid取决于布局需求：1)Flexbox适用于一维布局，如导航栏；2)Grid适合二维布局，如杂志式布局。两者在项目中可结合使用，提升布局效果。

如何包括CSS文件：方法和最佳实践May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用标签在HTML的部分引入外部CSS文件。1.使用标签引入外部CSS文件，如。2.对于小型调整，可以使用内联CSS，但应谨慎使用。3.大型项目可使用CSS预处理器如Sass或Less，通过@import导入其他CSS文件。4.为了性能，应合并CSS文件并使用CDN，同时使用工具如CSSNano进行压缩。

Flexbox vs Grid：我应该学习两者吗？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction