Css3弹性盒模型


HTML5中国为您提供最新的HTML5、css3的资讯和教程,和您在线上共同探讨和学习html5的技术和技巧。共同学习,共同进步。 Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子...
HTML5中国为您提供最新的HTML5、css3的资讯和教程,和您在线上共同探讨和学习html5的技术和技巧。共同学习,共同进步。
Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML 、GladeXML。

使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:

1.<body>
2.  <div id="box1">1</div>
3.  <div id="box2">2</div>
4.  <div id="box3">3</div>
5.</body>
传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序,也可以反转之。要开启弹性盒模型,只需设置拥有子盒子的盒子的display的属性值为box(或inline-box)即可。

1.display: box;

水平或垂直分布

“box-orient”定义分布的坐标轴:vertical和horizional。这两个值定义盒子如何显示,

1.body{
2.  display: box;
3.  box-orient: horizontal;
4.}

反向分布

“box-direction”可以设置盒子出现的顺序。默认情况下,只需定义分布坐标轴——box随html流分布。如果为水平坐标轴,则从左到右分布;垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”,则反转盒子的排列顺序。

1.body {
2.  display: box;
3.  box-orient: vertical;
4.  box-direction: reverse;
5.}

具体分布

属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义,盒模型将首先分布这些组,所有这些盒子将在每个组中。分布将从小到大排列。

01.body {
02.  display: box;
03.  box-orient: vertical;
04.  box-direction : reverse;
05.}
06.#box1 {
07.  box-ordinal-group: 2;
08.}
09.#box2 {
10.  box-ordinal-group: 2;
11.}
12.#box3 {
13.  box-ordinal-group: 1;
14.}

盒子尺寸

默认情况下,盒子并不具有弹性,如果box-flex的属性值至少为1时,则变得富有弹性。

如果盒子不具有弹性,它将尽可能的宽使其内容可见,且没有任何溢出,其大小由“width”和“height”来决定(或min-height、min-width、max-width、max-height)。

如果盒子是弹性的,其大小将按下面的方式计算:

具体的大小声明(width、height、min-width、min-height、max-width、max-height);
父盒子的大小和所有余下的可利用的内部空间
如果盒子没有任何大小声明,那么其大小将完全取决于父box的大小。即:盒子的大小等于父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比(子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和)。

如果一个或更多的盒子有一个具体的大小声明,那么其大小将计算其中,余下的弹性盒子将按照上面的原则分享剩下的可利用空间。

看看下面的例子,理解起来更容易。

所有盒子都是弹性的

下面的例子中,box1的大小为box2的两倍,box2与box3大小一样。看起来好像是用百分比定义盒子的大小,但是有一个区别:使用弹性盒模型,增加一个盒子,无须重新计算其大小。

01.body {
02.  display: box;
03.  box-orient: horizontal;
04.}
05.#box1 {
06.  box-flex: 2;
07.}
08.#box2 {
09.  box-flex: 1;
10.}
11.#box3 {
12.  box-flex: 1;
13.}

一些盒子有固定大小

下面的例子中,box3并不是弹性的,宽度为160px;这样box1和box2将有240px的可利用空间。因此,box1的宽度为160px(240*2/3),box2的宽度为80px(240*1/3)。

 
01.body {
02.  display: box;
03.  box-orient: horizontal;
04.  width: 400px;
05.}
06.#box1 {
07.  box-flex: 2;
08.}
09.#box2 {
10.  box-flex: 1;
11.}
12.#box3 {
13.  width: 160px;
14.}

更多 css 相关资讯

用css3制作纸张效果

用css3制作纸张效果

一、中规中矩的效果 所谓“中规中矩的效果”就是加个投影,贴个胶带什么的。效果如下: 您可以狠狠地点击这里:中规中矩纸张效果demo 这里纸张本身的效果没有什么说头的,就是个C

CSS3窍门:隐藏文本

css3的使用技巧有很多。本文就是讲css3的隐藏文本的技巧使用出来,是一个非常酷的文章隐藏把戏。我们将使用的::selection定义文字的颜色。而 ::selection选择的声明是一种新

网站设计中使用CSS的注意事项

大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范,但按照现有标准来使用CSS却还是不无裨益的。一般来说,开发人员应尽可能将内容与报告

CSS3灵活的盒子模型(Flexible Box Module)–2

继上一篇《CSS3 灵活的盒子模型(Flexible Box Module) – 1》后继续深入,说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module

CSS3中的全新色彩表现方式

CSS3中的全新色彩表现方式

传统来说,大家在CSS中使用的颜色要么是16进制格式(如#990000),要么是rgb格式(如rgb(171,205,239))。CSS3带来了一些全新色彩表现和处理方法,比如使用HSL(Hue, Saturation, Light)

CSS3灵活的盒子模型(Flexible Box Module)–1

CSS3 标准里引入了一些新的盒子模型参数,在 CSS2 的基础上,我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档。 通过学习和测试,我发现这种新的盒子

你需要了解的CSS3技巧

你需要了解的CSS3技巧

你们中有许多人可能已经听到过有关CSS3的不少传言,但是我们现在能真正用到的CSS3技巧又有哪些呢?本文,我将向你展示一些与众不同的CSS3技巧,这些技巧在一些主要的浏览器中表现良

玩转CSS3色彩

玩转CSS3色彩

传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。CSS3带来了一些新的处理颜色的方法,比如使用HSL(Hue, Saturation, Light) 和opacity/a

CSS长度单位参考

在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位。它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt,mm等

CSS3&amp;HTML5各浏览器支持情况一览表

CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA SAFARI IE 版本 5 3.6 10.1 4 4 3.6 3 10 10.5 4 6 7 8 RGBA Y

更多 box 相关资讯

CSS3灵活的盒子模型(Flexible Box Module)–2

继上一篇《CSS3 灵活的盒子模型(Flexible Box Module) – 1》后继续深入,说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module

CSS3灵活的盒子模型(Flexible Box Module)–1

CSS3 标准里引入了一些新的盒子模型参数,在 CSS2 的基础上,我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档。 通过学习和测试,我发现这种新的盒子

更多 弹性盒子 相关资讯