word; clear: both; text-indent: 7px; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">

word; clear: both; text-indent: 7px; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">弹性盒布局（display:flex）

弹性盒布局（Flexible Box）是一种十分方便的，只需要依赖于CSS的样式就可以轻松实现响应式布局。弹性布局 flex 是CSS中 display 的一个属性值，通过在父容器上添加 display:flex;属性，便可以实现其子元素在父元素中的弹性布局，但要注意的是 display:flex; 这一条样式只会作用在添加这一属性的父容器和非隔代子容器上，换句话说，父容器上的 diaplay:flex; 属性并不会使其直系子元素中的子元素产生弹性布局。                           

图6-39 弹性盒结构

通俗来讲，爹只能管得到自己的儿子、而管不到自己的孙子。如果想要在下一层中继续使用弹性布局，我们可以在相应的子元素上再次添加 display:flex; 属性来实现。弹性布局就像是在一个大盒子里摆放的几个小盒子，各自相对独立，其弹性盒的结构如图6-39所示。 从上图可以看出，弹性盒由容器，子元素和轴构成，并且默认情况下，子元素的排布方向与横轴的方向是一致的。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于只要开发人员声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器就会负责完成实际的布局。该种方式的布局模型几乎在主流浏览器中都得到来支持。

1.弹性布局的使用

弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。

①　给父容器添加display:flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

②　容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；

③　display:flex;容器添加弹性布局后，显示为块级元素；

    display: inline-flex;容器添加弹性布局后，显示为行级元素；

④　设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。但是position定位属性依然生效。

2.作用于父容器的相关属性

flex布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个；父容器相关属性名称如下：

（1）flex-direction

设置主轴方向，在Flex容器内使用主轴和副轴概念；默认x轴为主轴，y轴为副轴；可由Flex容器的 flex-direction 属性修改，在使用弹性布局时，需要通过主轴和副轴确定编辑的方向，flex-direction属性决定主轴的方向（即项目的排列方向），基本语法格式如下：

• row（默认值）：主轴为水平方向，起点在左端。

• row-reverse：主轴为水平方向，起点在右端。

• column：主轴为垂直方向，起点在上端。

• column-reverse：主轴为垂直方向，起点在下端。

flex-direction设置不同的值，决定了容器内元素的排列方向，如图6-40所示。

                                 图6-40 flex-direction属性效果

(2)flex-wrap

设置可换行属性，默认下容器内子元素会按照主轴方向排一行，不会换行，当总长度超过容器时子元素会被压缩，通过 flex-wrap 属性可设置换行模式，基本语法格式如下：

  nowrap（默认）：不换行。如果容器宽度不够时，每个项目会被挤压宽度；

                                  图6-41 nowrap属性效果

• wrap：换行，并且第一行在容器最上方；

                                     图6-42 wrap属性效果

  wrap-reverse：换行，并且第一行在容器最下方；

                                 图6-43 wrap-reverse属性效果

（3）flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，基本语法格式如下。

（4）justify-content

该属性定义了子容器在主轴上的排列对齐方式，此属性与主轴方向息息相关。它有5个取值，基本语法格式如下。

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center： 居中

• space-between：两端对齐，项目之间的间隔都相等。

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。（开头和最后的项目，与父容器的边缘有一定的间隔，是项目间隔的一半。）

图6-44  justify-content属性效果

（5）align-items

align-items属性定义项目在交叉轴(副轴)上如何对齐，基本语法格式如下，效果如图6-44所示。

图6-44  justify-content效果 

                                           图6-45align-content效果

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。

• baseline: 项目的第一行文字的基线对齐。（文字的行高，字体大小会影响每行的基线）

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

（6）align-content

align-content属性在开启换行模式后有换行时设置多行在副轴方向的对齐方式，如果项目只有一根轴线，该属性不起作用，效果如图6-45所示。

.box {

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

}

• flex-start：与交叉轴的起点对齐。

• flex-end：与交叉轴的终点对齐。

• center：与交叉轴的中点对齐。

• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

• space-around：每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍。

• stretch（默认值）：轴线占满整个交叉轴。

3．作用于子元素的相关属性

作用于子元素的6个相关属性如下所示。

（1）order

order属性定义项目的排列顺序,值为无单位整数,数值越小，排列越靠前，默认为0，效果如图6-46所示。

图6-46   order属性效果

（2）flex-grow

定义子元素放大比例，只有在容器主轴方向大小大于子元素总大小时才有效果，即容器有空余，值为无单位非负数字，可设置浮点数，默认为0；当值为0时代表子元素不放大，如果容器有剩余空间则空出；如果有子元素 flex-grow 值不为0，则子元素会按照 flex-grow 值的比例放大并填充容器的剩余空间，效果如图6-47所示。

                               图6-47   flex-grow属性效果

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。具体计算方式：

（3）flex-shrink

定义子元素缩小比例，只有在容器主轴方向大小小于子元素总大小且不换行时才有效果，即容器空间不足，值为无单位非负数字，可设置浮点数，默认为1；为0表示子元素不缩小，如果容器大小小于子元素总大小，而所有子元素均不缩小，则子元素会超出容器范围；如果有子元素 flex-shrink 值不为0，则子元素会按照 flex-shrink 值的比例缩小在容器中，效果如图6-48所示。

图6-48  flex-shrink属性效果

（4）    flex-basis

图6-49  flex-basis属性效果

    flex-basis属性定义项目占据的主轴空间，如果主轴为水平，则设置这个属性，相当于设置项目的宽度，原宽度width将会失效。推荐在弹性布局中多使用 flex-basis 而不是直接设置 width height 属性，它的默认值为auto，即项目的本来大小，效果如图6-49所示。

（5）flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1auto。后两个属性可选。这个属性有两个快捷设置：auto=(1 1 auto)/none=(0 0 auto)。通常直接用 flex 设置子元素比例大小，例如使用 flex: 1 直接设置大小比例，而不再单独写 flex-grow: 1

（6）align-self

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch(默认值)，基本语法格式如下。除多出默认值 auto 外，属性值同 align-items。效果如图6-50所示。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}

图6-50  flex-basis属性效果

下面通过案例6-29来测试以上弹性盒布局的各个属性,效果如图6-51所示。

例6-29   example29.html

图6-51弹性盒属性应用效果

学习完弹性盒的各个属性，接下来使用弹性盒来做一个非常常见且实用的响应式布局，圣杯布局。圣杯布局是指在页面主体部分分为 left content right 3部分，left和right固定大小，content部分会自适应屏幕大小，后来国内的淘宝团队对其进行了改良，改良后效果基本相同，一般叫做双飞翼布局，使用搜索引擎搜索有很多相关介绍。

圣杯布局是使用 floatmargin padding 和定位等盒模型方法实现的，关键点是使用负值的 margin 使left和right可以与设置为100%宽度的content浮动在同一行中，这里使用弹性布局则可以非常方便清晰的实现有自适应效果的圣杯布局，通过案例6-30来体验,效果如图6-52、6-53所示。

例6-30  example30.html

Web浏览器运行效果如图6-52所示。

                                  图6-52 弹性盒布局PC端页面效果

Web浏览器响应式设计模式下运行效果如图6-53所示。

Web浏览器响应式设计模式下运行,如果页面的高度超过设备屏幕的高度时，页面的下半部分不会完全展示在移动设备上，这时，可以通过滑动屏幕的方式查看页面下半部分内容。

本模块详细讲解了HTML5的一些高级特性，过渡，变形，动画，画布，响应式布局设计等知识点。重点讲解了什么是响应式WEB设计，然后对响应式WEB设计相关知识点，视口，媒体查询，弹性盒模型等核心技术进行了讲解。学习本模块内容后，要求读者能进行页面基本动画的处理，了解响应式布局的设计，掌握媒体查询盒弹性盒布局的应用。

图6-53 弹性盒布局移动端页面效果