学习笔记 第十三章 使用CSS3新布局

第13章   使用CSS3新布局

【学习重点】

• 设计多列布局
• 设计弹性盒布局样式
• 使用CSS3布局技术设计适用移动需求的网页

13.1  多列布局

CSS3使用columns属性定义多列布局，用法如下：

columns:column-width || column-count;

• column-width：定义每列的宽度；
• column-count：定义列数。

13.1.1 设置列宽

CSS3使用column-width属性定义单列显示的宽度，用法如下：

column-width:length | auto;

• length：长度值，不可为负值；
• auto：根据浏览器自动计算来设置。

column-width属性可以与其它多列布局属性配合使用，设计指定固定列数、列宽的布局效果，也可以单独使用，限制单列宽度，当超出宽度时，则会自动多列显示。

13.1.2 设置列数

CSS3使用column-count属性定义列数，用法如下：

column-count:integer | auto;

• integer：定义栏目的列数，取值为正整数；
• auto：根据浏览器计算值自动设置。

13.1.3 设置列间距

CSS3使用column-gap属性定义两栏之间的间距，用法如下：

column-gap:normal | length;

• normal：根据浏览器默认设置进行解析，一般为1em；
• length：长度值，不可为负值。

13.1.4 设置边框样式

CSS3使用column-rule属性定义每列之间边框的宽度、样式和颜色，用法如下：

column-rule: length || style || color || transparent;

• length：长度值，不可以为负值，功能与column-rule-length属性相同；
• style：定义列边框样式，功能与column-rule-style属性相同；
• color：定义列边框的颜色，功能与column-rule-color属性相同；
• transparent：设置边框透明显示。

CSS3在column-rule属性基础上派生了3个列边框属性：

• column-rule-length：定义列边框宽度；
• column-rule-style：定义列边框样式；
• column-rule-color：定义列边框颜色。

13.1.5 设置跨列显示

CSS3使用column-span属性定义跨列显示，也可以设置单列显示，用法如下：

column-span:none | all;

• none：只在本栏中显示；
• all：将横跨所有列。

13.1.6设置列高度

CSS3使用column-fill属性定义栏目的高度是否统一，用法如下：

column-fill:auto | balance;

column-fill属性初始值为balance，适用于多列布局元素，取值说明如下：

• auto：各列的高度随其内容的变化而自动变化；
• balance：各列的高度将会根据内容最多的那一列的高度进行统一。

13.2  弹性盒布局

传统的盒模型基于HTML文档流在垂直方向上排列盒子，使用弹性盒模型可以定义盒子的排列顺序，也可以反转之。

启动弹性盒模型，只需为包含有子对象的容器对象设置display属性即可，用法如下：

display:box | inline-box | flexbox | inline-flexbox | flex | inline-flex;

• box：将对象作为弹性伸缩盒显示，伸缩盒为最老版本；
• inline-box：将对象作为内联块级弹性伸缩盒显示，伸缩盒为最老版本；
• flexbox：将对象作为弹性伸缩盒显示，伸缩盒为过渡版本；
• inline-flexbox：将对象作为内联块级弹性伸缩盒显示，伸缩盒为过渡版本；
• flex：将对象作为弹性伸缩盒显示，伸缩盒为最新版本；
• inline-flex：将对象作为内联块级弹性伸缩盒显示，伸缩盒为最新版本。

CSS3弹性盒布局大致经历了三个版本：

1. 2009年版本（老版本）display:box；
2. 2011年版本（过渡版本）display:flexbox；
3. 2012年版本（最新稳定版本）display:flex。

各主流设备支持情况说明如下：

主流设备	支持情况
IE10+	支持最新版本
Chrome21+	支持2011版
Chrome20-	支持2009版
Safari3.1+	支持2009版
Firefox22+	支持最新版本
Firefox2-21	支持2009版
Opera12.1+	支持2011版
Android2.1+	支持2009版
iOS3.2+	支持2009版

如果把新语法、旧语法和中间过渡语法混合在一起使用，就可以让浏览器得到完美的展示。

13.2.1 定义Flexbox

flexbox是CSS3升级后的新布局模式，目的是允许容器有能力让其子项目能够改变其宽度、高度、顺序等，以最佳方式填充可用空间，适应所有类型的显示设备和屏幕大小。Flex容器会使子项目扩展来填满可用空间，或缩小它们以防止溢出容器。

Flexbox由伸缩容器和伸缩项目组成。

通过设置元素的display属性为flex或inline-flex可以得到一个伸缩容器。语法如下：

display:flex | inline-flex;

上面语法定义伸缩容器，属性值决定容器是行内显示还是块显示；它的所有子元素将变成flex文档流，即伸缩项目。

CSS的column属性在伸缩容器上没有效果，同时float、clear和vertical-align属性在伸缩项目上也没有效果。

常规布局是基于块和文本流方向，而Flex布局是基于flex-flow。默认情况下伸缩行和文本方向一样：从左到右，从上到下。

13.2.2 定义伸缩方向

使用flex-direction属性可以定义伸缩方向，适用于伸缩容器。flex-direction属性主要用来创建主轴，从而定义伸缩项目在伸缩容器内的放置方向。语法如下：

flex-direction: row | row-reverse | column | column-reverse;

• row：默认值，在ltr（left-to-right）排版方式下从左向右排列，在rtl（right-to-left）排版方式下从右向左排列；
• row-reverse：与row排列方向相反，在ltr（left-to-right）排版方式下从右向左排列，在rtl（right-to-left）排版方式下从左向右排列；
• column：类似于row，不过是从上到下排列；
• column-reverse：类似于row-reverse，不过是从下到上排列。

13.2.3 定义行数

flex-wrap主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行牌堆放的方向。适用于伸缩容器。语法如下：

flex-wrap:nowrap | wrap | wrap-reverse;

• nowrap：默认值，伸缩容器单行显示；
• wrap：伸缩容器多行显示；
• wrap-reverse：伸缩容器多行显示，排列方式为row-reverse。

提示：

flex-flow属性是flex-direction和flex-wrzap属性的复合属性，适用于伸缩容器，可以同时定义伸缩容器的主轴和侧轴。默认值为row nowrap。具体语法如下：

flex-flow:<'flex-direction'> || <'flex-wrap'>

13.2.4 定义对齐方式

1. 主轴对齐

   justify-content用来定义伸缩项目沿着主轴线的对齐方式，适用于伸缩容器。具体语法如下：

   justify-content: flex-start | flex-end | center | space-between | space-around;

   • flex-start：默认值，伸缩项目向一行的起始位置靠齐；
   • flex-end：伸缩项目向一行的结束位置靠齐；
   • center：伸缩项目向一行的中间位置靠齐；
   • spac-between：伸缩项目会平均地分布在行里。第一个伸缩项目在一行中的开始位置，最后一个伸缩项目在一行中终点位置；
   • space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。
2. 侧轴对齐

   align-items主要用来定义伸缩项目可以在伸缩容器的当前行的侧轴上的对齐方式，该属性适用于伸缩容器。类似侧轴的justify-content属性。语法如下：

   align-items:flex-start | flex-end | center | baseline | stretch;

   • flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边；
   • flex-end：伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点的边；
   • center：伸缩项目的外边距盒在该行的侧轴上居中放置；
   • baseline：伸缩项目根据它们的基线对齐；
   • stretch：默认值，伸缩项目拉伸填充整个伸缩容器。
3. 伸缩行对齐

   align-content主要用来调准伸缩行在伸缩容器里的对齐方式，该属性适用于伸缩容器。类似于伸缩项目在主轴上使用justify-content属性一样，但本属性在只有一行的伸缩容器上没有效果。具体语法如下：

   align-content:flex-start | flesx-end | center | space-between | space-around | stretch;

   • flex-start：各行向伸缩容器的起点位置堆叠；
   • flex-end：各行向伸缩容器的终点位置堆叠；
   • center：各行向伸缩容器的中间位置堆叠；
   • space-between：各行在伸缩容器中平均分布；
   • space-around：各行在伸缩容器中平均分布，在两边各有一半的空间；
   • stretch：默认值，各行将会扩展以占用剩余的空间。

13.2.5 定义伸缩项目

一个伸缩项目就是一个伸缩容器的子元素，伸缩容器中的文本也被视为一个伸缩项目。

伸缩项目都有一个主轴长度（main size）和一个侧轴长度（cross size）。主轴长度是伸缩项目在主轴上的尺寸，侧轴长度是伸缩项目在侧轴上的尺寸。一个伸缩项目的宽或高取决于伸缩容器的轴，可能就是它的主轴长度或侧轴长度。

下面的属性可以调整伸缩项目的行为：

1. 显示位置

   默认情况下，伸缩项目是按照文档流出现的先后顺序排列。然而，order属性可以控制伸缩项目在它们的伸缩容器中出现的顺序，该属性适用于伸缩项目。语法如下：

   order:<integer>;

2. 扩展空间

   flex-grow可以根据需要用来定义伸缩项目的扩展能力，该属性适用于伸缩项目。它接受一个不带单位的值作为一个比例，主要决定伸缩容器剩余空间按比例应该扩展多少空间，语法如下：

   flex-grow:<number>

   默认值为0，负值同样生效。

   如果所有伸缩项目的flex-grow设置为1，那么每个伸缩项目将设置为一个大小相等的剩余空间。如果给其中一个伸缩项目设置flex-grow值为2，那么这个伸缩项目所占的剩余空间是其它伸缩项目所占空间的两倍。

3. 收缩空间

   flex-shrink可以根据需要用来定义伸缩项目伸缩的能力，该属性适用于伸缩项目。与flex-grow功能相反。语法如下：

   flex-shrink:<number>;

   默认值为1，负值同样生效。

4. 伸缩比率

   flex-basis用来设置伸缩基准值，剩余的空间按比例进行伸缩，适用于伸缩项目。语法如下：

   flex-basis:<length> | auto;

   默认值为auto，负值不合法。

   扩展：

   flex是flex-grow、flex-shrink和flex-basis3个属性的复合属性，适用于伸缩项目。其中第二个和第三个参数是可选参数，默认值为“0 1 auto”，具体语法如下：

   flex:none | [<'flex-grow'><'flex-shrink'>?||<'flex-basis'>];

5. 对齐方式

   align-self用来在单独的伸缩项目上覆写默认的对齐方式，语法如下：

   align-self:auto | flex-start | flex-end | center | baseline | stretch;