CSS3伸缩布局盒模型

CSS3伸缩布局盒模型

早期的布局主要依赖于表格，从CSS2.1中有关于布局的机制有所改变，但还是并不多。开发者通常不愿意使用绝对定位，因为太不灵活；浮动定位常用于页面的布局，但对于全页多列布局来说，它总是存在一些小毛病，功能上也有很多限制。CSS3中引入了许多的布局机制，使构建一个多列布局变得更加轻松，同时，CSS2. 1 规则是比较难实现的一些复杂布局表现， 如今也变得更加容易。

1. 弹性盒模型：Flexbox模型基础知识CSS3引入一种新的布局模式——Flexbox 布局，即伸缩布局盒（FlexibleBox）模型，用来提供一个更加有效的方式制定、 调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称 Flex。

CSS 中的布局模式

谈到布局，CSS2.1中定义了四种布局模式，由一个盒与其弟、祖先盒的关系决定其尺寸与位置的算法。 

-块布局： 呈现文档的布局模式。 

-行内布局： 呈现文本的布局模式。 

-表格布局： 用格子呈现2D数据的布局模式。http:/ /www.iis7.com/b/plc/ 

-定位布局： 能够直接地定位元素的布局模式，定位元素基本与其他元素没有任何关系。 

CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（ 伸缩 项目）扩展来填满可用空间， 或缩小它们以防止溢出容器。

最重要的是，Flexbox布局方向不可预知，不像常规的布局（块就是从上到下，内联就从左到右），而那些常规的适合页面布局，但对于支持大型或者复杂的应用程序（ 特别是涉及取向改变、缩放和收缩等）就缺乏灵活性。

：Flexbox 模型的功能

Flexbox布局对于设计比较复杂的页面非常有用。可以轻松地实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变。 同时减少了依赖于浮动 布局实现元素位置的定义以及重置元素的大小。 Flexbox 布局在定义伸缩项目大小时伸缩容器会预留一些可用空间， 可以调节伸缩项目的相对大小和位置。 例如，可以确保伸缩容器中的多余空间平均分配多个伸缩项目。当然，如果伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox 布局功能主要具有以下几点：

1· 屏幕和浏览器窗口大小发生改变也可以灵活调整布局。 

2· 指定伸缩项目沿着主轴或侧轴按比例分配额外空间（ 伸缩容器额外空间），从而调整伸缩项目的大小。 

3· 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间。 

4· 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围。 

5· 控制元素在页面上的布局方向。 

6· 按照不同于文档对象模型（ DOM） 所指定排序方式对屏幕上的元素重新排序。 也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

：Flexbox 模型中的术语

Flexbox模型中的术语和CSS3其他属性不一样，Flexbox并不是一个属性，而是一个模块，包括多个CSS3属性，涉及很多东西，包括整个组属性。 虽然现在对Flexbox有 一定的了解，如果想更好地使用 Flexbox，新的术语和概念可能是一个障碍，所以首先了解基本概念。

1.主轴和侧轴在Flexbox模型中与布局计算偏向使用书写模式方向的块布局与行内布局不同，伸缩布局偏向使用伸缩流的方向。一个row伸缩容器中各种方向与大小术语 

·主轴，主轴方向：用户代理沿着一个伸缩容的主轴配置伸缩项目，主轴是主轴方向的延伸。伸缩容器的主轴，伸缩项目主要沿着这条轴进行布局。小心，它不一定是水平的， 这主要取决于justify- content属性。 如果其取值为column，主轴的方向为纵向的。 

·主轴起点，主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。也就是说，伸缩项目放置在伸缩容器内从主轴起点（ main- start） 向主轴终点（ main- end）方向。 

·主轴长度，主轴长度属性：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。 

·侧轴，侧轴方向：与主轴垂直的轴称做侧轴， 侧轴是侧轴方向的延伸。 主要取决于主轴方向。 

·侧轴起点，侧轴终点：填满项目的伸缩行的配置配置从容器的侧轴起点边开始， 往侧轴终点边结束。 

·侧轴长度，侧轴长度属性：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是width或 height属性，由 一个对着侧轴 方向决定。

2. 伸缩容器和伸缩项目通过display属性显式地给一个元素设置为flex或者inline-flex，这个容器就是一个伸缩容器。伸缩容器会为其内容创立新的伸缩 格式化上下文，其中设置为flex的容器被渲染为一个块级元素，而设置 为inline-flex的容器则渲染为一个行内元素。若元素display的指定值是inline-flex 且元素 是一个浮动或绝对定位元素， 则display的计算值是flex。一个伸缩容器的内容具有零个以上的伸缩项目——伸缩容器的每个子元素（ 除了需要盒修复的元素 之外）都会成为一个伸缩项目，且用户代理会将任何直接在伸缩容器里的连续文字块包起来成为匿名伸缩项目。

3. 伸缩容器的属性Flexbox伸缩布局中伸缩容器和伸缩项目是伸缩布局模块中的重要部分，其中每一部分都具有各自的属性。伸缩容器的属性包括以下几个：

 1). 伸缩流方向。是指伸缩容器的主轴方向，其决定了伸缩项目放置在伸缩容器的方向。伸缩流方向主要通过flex- direction属性来设置，其默认值为row。 伸缩流方向和书写模式有关系，换句话说，伸缩项目根据书写模式的方向布局。

 2). 伸缩行换行。伸缩项目在伸缩容器中有时候也会溢出伸缩容器。与传统的盒模型一样，CSS允许使用overflow属性来处理溢出内容的显示方式。 在伸缩容器中有一个伸缩换行属性，主要用来设置伸缩容器的伸缩项目是单行显示还是多行显示，以及决定侧轴的方向。 使用此属性来启用溢出的伸缩容器的伸缩项目自动换行到下一行以及控制流动方向。在伸缩容器属性中，主要通过flex-wrap属性来设置伸缩项目是否换行， 默认值为 nowrap。

 3). 伸缩方向与换行。是伸缩流方向与伸缩换行的结合物，换句话说，伸缩方向与换行属性flex-flow同时设定了伸缩流方向flex-direction和伸缩换行flex-wrap 两个属性，简而言之是这两个属性的缩写，这两个属性决定了伸缩容器的主轴与侧轴。 

 4). 主轴对齐。用来设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器额外空间。当一行上的所伸缩项目不能伸缩或 可伸缩但已达到最大长度时，这一属性才会对伸缩容器额外空间进行分配。当伸缩项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

5). 侧轴对齐。伸缩项目可以在伸缩容器当前行的侧轴上进行对齐，这类似于主轴对齐方式，只是另一个方向。也就是说侧轴对齐主要用来指定伸缩项目在伸缩 容器中如何放置和对齐的方式。换句话说，用来定义伸缩项目在伸缩容器的当前行的侧轴上对齐方式。 

6). 堆栈伸缩行。 用来定义伸缩容器中伸缩项目行在侧轴的对齐方式，类似于侧轴对齐，只不过这是用来控制伸缩项目行在布局轴的堆放方式。

4.    伸缩项目的属性一个伸缩项目是一个伸缩容器的子元素。伸缩容器中的文本也被视为一个伸缩项目。伸缩项目中内容与普通流一样。比如说，当一个伸缩 项目被设置为浮动， 依然可以在这个伸缩项目中放置一个浮动元素。 伸缩项目都有一个主轴长度和一个侧轴长度。 主轴长度是伸缩项目在主轴上的尺寸， 侧轴 长度是伸缩项目在侧轴上的尺寸。 或者说，一个伸缩项目的宽度或高取决于伸缩容器的轴，可能就是它的主轴长度或侧轴长度。下面的几个属性可以调整伸缩 项目的行为： 

1). 显示顺序。 伸缩容器中的伸缩项目默认显示顺序是遵循文档在源码中的出现的先后顺序（HTML文档的DOM结构中的先后顺序）。可以通过伸缩项目的显示 顺序修改伸缩项目在页面中显示顺序，也可以通过这个属性对伸缩项目进行排序组合。 

2). 侧轴对齐。 包括两种， 一种是align-items属性， 可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式； 另一种是align-self属性， 主要用来 在单独的伸缩项目上覆写默认的对齐方式。 对于匿名伸缩项目， align-self的值永远与其关联的伸缩容器的align-items的值相同。 

3). 伸缩性。 定义伸缩项目可改变它们的宽度或高度填补可用的空间。可以将伸缩容器的额外空间分发给其伸缩项目（ 与伸缩项目的正弹性成正比） 或将它们 缩小以防止伸缩项目溢出（ 与伸缩项目的负弹性成正比）。

5.      伸缩行伸缩项目沿着伸缩容器内的一个伸缩行定位。 伸缩容器可以是单行的， 也可以是多行的。 其主要由flex-warp属性决定。单行的伸缩容器会将其 所有子元素在单独的一行上进行布局，这种情况之下有可能导致内容溢出伸缩容器； 多行的伸缩窗口会将其伸缩项目配置在多个伸缩行上，这类似于文本的 排列。 当文本过宽导致一行无法容纳时，内容会断开并移至新的一行。 当用户代理创建新的伸缩行时，这些伸缩行会根据flex-wrap属性沿着侧轴进行堆叠。 除非伸缩容器本身是空的， 每一个伸缩行至少包含一个伸缩项目。

：Flexbox 模型规范状态 

Flexbox布局的语法规范经过几年发生了很大的变化，也给 Flexbox 的使用带来一定的局限性， 因为语法规范版本众多， 浏览器支持不一致， 致使 Flexbox 布局使用不多。 Flexbox 语法规范主要经历 了以下阶段。 

1). 2009 年 07 月 工作 草案（ display: box）

2). 2011 年 03 月 工作 草案（ display: flexbox）

3). 2011 年 11 月 工作 草案（ display: flexbox）

4). 2012 年 03 月 工作 草案（ display: flexbox）

5). 2012 年 06 月 工作 草案（ display: flex）

6). 2012 年 09 月 候选 推荐（ display: flex）

把Flexbox布局语法规范主要分成三种。

-旧版本（Old），2009年版本，使用display: box 或者display: inline-box。 

-混合版本（ Hybrid），2011年版本，使用display: flexbox 或者display: inline-flexbox。 

-最新版本（ Modern），使用display:flex或者display:inline-flex。

：如何辨别旧Flexbox和新Flexbox

-看到“ display:box”或者“ box-{*}”属性，说明是2009年版本的Flexbox。 

-看到“ display:flexbox”或者“ flex()”函数，说明是2011年版本，也称为Flexbox混合版本。 

-看到“ display:flex”或者“ flex-{*}”属性，说明是当前规范，也就是W3C标准规范版本的Flexbox。

：伸缩容器设置display要改变元素的模式，需要使用display属性， 如果在让一个元素变成伸缩容器， 也离不开display属性。

属性值主要有两种。 

-box： 设置为块伸缩容器。 

-inline- box： 设置为内联级伸缩容器。

：伸缩流方向box-orient伸缩流方向box-orient 属性主要用来创建主轴， 从而定义了伸缩项目在伸缩容器中的流动布方向。 换句话说主要用来指定伸缩项目如何放置在伸缩容器的主轴上。

伸缩流方向box-orient主要适用于伸缩容器。 伸缩流方向主要是用来确定伸缩项目在伸缩容器中的流动布局方向，该属性主要有四个属性值， 其取值说明如下：

-horizontal： 伸缩项目在伸缩容器中从左到右在一条不平线上排列显示。 

-vertical： 伸缩项目在伸缩容器中从上到下在一条垂直线上排列显示。 

-inline- axis： 伸缩项目沿着内联轴排列显示。 

-block- axis： 伸缩项目沿着块轴排列显示。

伸缩流方向和文本书写模式也有关系， 如果书写模式是ltr， 表示排版本方向从左向右， 如果书写模式是rtl表示排版方向从右向左排列。 伸缩流的取值为 horizontal 和 inline- axis 时， 确认伸缩项目的 伸缩流方向和书写模式的方向关连性非常的强。 可以说书写模式直接影响了它们的排列方向。