CSS盒子模型之CSS3可伸缩框属性（Flexible Box）_html/css

首页

web前端

html教程

CSS盒子模型之CSS3可伸缩框属性（Flexible Box）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:50 AM

CSS盒子模型(下)

一．CSS3可伸缩框（Flexible Box）

可伸缩框属性（Flexible Box）是css3新添加的盒子模型属性，有人称之为弹性盒模型，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分等分布方式以及如何处理可用的空间。使该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome（-webkit）。

CSS3可伸缩框属性列表：

属性	描述	说明
box-orient	规定框的子元素是否应水平或垂直排列。	水平或垂直分布
box-direction	规定框的子元素的显示方向。	反向分布
box-ordinal-group	规定框的子元素的显示次序。	具体分布
box-flex	规定框的子元素是否可伸缩。	盒子尺寸
box-flex-group	将可伸缩元素分配到柔性分组。	盒子尺寸
box-pack	规定水平框中的水平位置或者垂直框中的垂直位置。	处理空间多
box-align	规定如何对齐框的子元素。	处理空间多
box-lines	规定当超出父元素框的空间时，是否换行显示。	处理空间不足

下面对 CSS3 中新增的弹性盒模型属性做详细介绍。

首先我们先创建一个 html 页面，示例代码1：demo.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="style.css">    <title>Flexible Box</title></head><body>    <div id="main">        <div id="div1">1</div>        <div id="div 2">2</div>        <div id="div 3">3</div>    </div></body></html>

接着我们给页面添加上基本的样式，示例代码2：style.css

body,div{清除所有元素的默认外边距和内边距    margin: 0;    padding: 0;}#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;}#div1{/*给div1添加样式*/    width: 100px;    height: 50px;    background-color: #00B366;}#div2{/*给div2添加样式*/    width: 100px;    height: 50px;    background-color: #80C8FE;}#div3{/*给div3添加样式*/    width: 100px;    height: 50px;    background-color: #FEB380;}

效果如下：

声明：

?要想运用 CSS3 的弹性布局，需要将父容器设置为display:box 或 display:inline-box。

?此部分示例在chrome下运行截图。

1. box-sizing：以特定的方式定义匹配某个区域的特定元素。

语法：

box-sizing: content-box|border-box|inherit;

取值：

值	描述
content-box（默认值）	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	应该从父元素继承box-sizing属性的值。

2. box-orient：规定框的子元素是否应水平或垂直排列。

语法：

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

取值：

值	描述
horizontal	在水平行中从左向右排列子元素。
vertical	从上向下垂直排列子元素。
inline-axis（默认值）	沿着行内轴来排列子元素（映射为 horizontal）。
block-axis	沿着块轴来排列子元素（映射为 vertical）。
inherit	应该从父元素继承 box-orient 属性的值。

说明：

horizontal和inline-axis属性其效果表现一致，都可以将容器水平排列，在默认情况下也呈现水平排列的样式。当父容器设置高度时，在firefox下面其子容器的高度无效，但chrome下面则有效。

如果你容器不设置高度，子容器的高度值才生效，在firefox下面他们的高度取其中的最大值。而chrome下面设置高度的子容器为自己的高度，未设置的其高度和最大值的高度一样，其实就是和父容器的高度一致。

vertical和block-axis属性效果表现一致，都可将子容器垂直排列。他们是对父容器的高度进行分配。如果子容器设置了宽度，也是谷歌下面有效，火狐无效，其它都与horizontal表现一致。

切记，inline-axis为默认值，沿着行内轴来排列子元素（映射为 horizontal）。

示例代码3：设置框的子元素在水平行中从左向右排列子元素（修改样式表文件，添加如下样式代码）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient: horizontal;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient: horizontal;    /*W3C*/    display:box;    box-orient: horizontal; }

效果如下：

注:

实现垂直方向上布局、inline-axis 和 block-axis，只需修改值即可。

inherit 属性值是布局方式继承自父元素，如果父元素是水平的，则它也使用水平布局。

3. box-direction：规定框的子元素的显示方向。

语法：

box-direction: normal|reverse|inherit;

取值：

值	描述
normal（默认值）	以默认方向显示子元素。
reverse	以反方向显示子元素。
inherit	应该从子元素继承 box-direction 属性的值

说明：以反方向显示子元素。

示例代码4：设置垂直且以反方向显示子元素（修改样式表文件，添加如下样式代码）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:vertical;    -moz-box-direction:reverse;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:vertical;    -webkit-box-direction:reverse;    /*W3C*/    display:box;    box-orient:vertical;    box-direction:reverse;}

效果如下：

注:

normal只需修改值即可。inherit可自己实验。

4. box-ordinal-group：规定框的子元素的显示次序。

语法：

box-ordinal-group: integer;

取值：

值	描述
integer（默认值1）	一个整数，指示子元素的显示次序。

说明：根据box-ordinal-group的integer值从小到大显示。

示例代码5：设置子元素的显示次序（修改样式表文件）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:vertical;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:vertical;    /*W3C*/    display:box;    box-orient:vertical;}#div1{/*给div1添加样式*/    width: 100px;    height: 50px;    background-color: #00B366;    box-ordinal-group:2;    -webkit-box-ordinal-group:2;    -moz-box-ordinal-group:2;}#div2{/*给div2添加样式*/    width: 100px;    height: 50px;    background-color: #80C8FE;    box-ordinal-group:1;    -webkit-box-ordinal-group:1;    -moz-box-ordinal-group:1;}#div3{/*给div3添加样式*/    width: 100px;    height: 50px;    background-color: #FEB380;    box-ordinal-group:3;    -webkit-box-ordinal-group:3;    -moz-box-ordinal-group:3;}

效果如下：

5. box-flex：规定框的子元素是否可伸缩。

语法：

box-flex: value;

取值：

值	描述
value（默认值0.0）	元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

说明：

可伸缩，顾名思义，子元素如果规定可伸缩，则不要设置宽或高。但一些盒子可以有固定大小，不伸缩。

示例代码6：设置div3为固定大小，div1和div2为可伸缩且div1是div2的两倍（修改样式表文件）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:vertical;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:vertical;    /*W3C*/    display:box;    box-orient:vertical;}#div1{/*给div1添加样式*/    box-flex:2.0;    -webkit-box-flex:2.0;    -moz-box-flex:2.0;    background-color: #00B366;}#div2{/*给div2添加样式*/    box-flex:1.0;    -webkit-box-flex:1.0;    -moz-box-flex:1.0;    background-color: #80C8FE;}#div3{/*给div3添加样式*/    height: 100px;     background-color: #FEB380;}

效果如下：

6. box-flex-group：将可伸缩元素分配到柔性分组。

语法：

box-flex-group: integer;;

取值：

值	描述
integer（默认值1）	一个整数。（第一个柔性分组是 1，后面的柔性分组是更大的值）。

说明：

动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间），剩余空间则均分给数值最小的那个组（可能有1个或多个元素）。具体怎么分，本人还不清楚。

示例代码7：将可伸缩元素分配到柔性分组（修改样式表文件）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 300px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:vertical;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:vertical;    /*W3C*/    display:box;    box-orient:vertical;}#div1{/*给div1添加样式*/    background-color: #00B366;    box-flex:2.0;    -webkit-box-flex:2.0;    -moz-box-flex:2.0;    box-flex-group:1;    -webkit-box-flex-group:1;    -moz-box-flex-group:1;}#div2{/*给div2添加样式*/    background-color: #80C8FE;    box-flex:1.0;    -webkit-box-flex:1.0;    -moz-box-flex:1.0;    box-flex-group:2;    -webkit-box-flex-group:2;    -moz-box-flex-group:2;}#div3{/*给div3添加样式*/    background-color: #FEB380;    box-flex:1.0;    -webkit-box-flex:1.0;    -moz-box-flex:1.0;     box-flex-group:1;    -webkit-box-flex-group:1;    -moz-box-flex-group:1;}

效果如下：

7. box-pack：规定水平框中的水平位置或者垂直框中的垂直位置。

语法：

box-pack: start|end|center|justify;

取值：

值	描述
start（默认值）	对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）。对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。
end	对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。
center	均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后。
justify	在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。

说明：

空间太多如何处理，可利用空间的分布取决于两个属性值：box-align 和 box-pack。

属性“box-pack”一般管理水平方向上的空间分布（根据box-orient的值，也可管理垂直方向），有以下四个可能属性：start、end、 justify、 or center。如，start 所有盒子在父盒子的左侧，余下的空间在右侧。

属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。如：start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部。

示例代码8：设置所有盒子在父盒子的右侧（修改样式表文件）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 400px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:horizontal;    -moz-box-pack:end;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:horizontal;    -webkit-box-pack:end;    /*W3C*/    display:box;    box-orient:horizontal;    box-pack:end;}#div1{/*给div1添加样式*/    width: 100px;    height: 50px;    background-color: #00B366;}#div2{/*给div2添加样式*/    width: 100px;    height: 50px;    background-color: #80C8FE;}#div3{/*给div3添加样式*/    width: 100px;    height: 50px;    background-color: #FEB380;}

效果如下：

设置所有盒子在父盒子的中间（center），如下图左；设置垂直（box-orient）且盒子在父盒子的左侧（start），如下图右

8. box-align：规定如何对齐框的子元素。

语法：

box-align: start|end|center|baseline|stretch;

取值：

值	描述
start	对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。对于反方向的框，每个子元素的下边缘沿着框的底边放置。
end	对于正常方向的框，每个子元素的下边缘沿着框的底边放置。对于反方向的框，每个子元素的上边缘沿着框的顶边放置。
center	均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。
baseline	如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。
stretch（默认值）	拉伸子元素以填充包含块。

说明：控制垂直方向（box-pack的相对方向）。

示例代码9：设置所有盒子在父盒子的右侧（修改样式表文件）

#main{/*设置外围容器样式*/    margin:auto;    border:1px solid blue;    width: 400px;    height: 200px;    margin-top:50px;    /*Firefox*/    display:-moz-box;    -moz-box-orient:vertical;    -moz-box-pack:justify;    -moz-box-align:center;    /*Safari、Opera 以及 Chrome*/    display:-webkit-box;    -webkit-box-orient:vertical;    -webkit-box-pack:justify;    -webkit-box-align:center;    /*W3C*/    display:box;    box-orient:vertical;    box-pack:justify;    box-align:center;}

效果如下：

9. box-lines：规定当超出父元素框的空间时，是否换行显示。

语法：

box-lines: single|multiple;

取值：

值	描述
single（默认值）	所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。
multiple	允许框扩展为多行，以容纳其所有子元素。

说明：

空间不足怎么办，与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。有待验证。

二．DIV+CSS模式简介

Web标准主要由三部分组成：结构（structure）、表现（presenation）和行为（behavior）。

?结构标准对应的主要语言是XHTML

?表现标准对应的主要语言是CSS

?行为标准对应的主要语言是JavaScript

制作一个静态页面，主要用到的就是XHTML与CSS，所以制作标准页面的技术就是XHTML+CSS。而我们经常使用DIV进行页面的整体布局结构（以前使用表格布局），用CSS修饰内容的外观样式，从而形成了DIV+CSS模式。

DIV其实是盒子模型的一个实例，所以深刻的理解盒子模型对网页布局非常重要。

完

CSS盒子模型（上）

声明

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

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

See all articles