第四章移动端页面布局

流式布局

流式布局介绍

移动端页面的常用布局方式包括 流式布局 、 弹性盒布局 和 Rem适配布局 。

流式布局也称为百分比自适应布局，是移动 Web 开发中比较常见的布局方式。流式布局在 CSS 代码中需要使用百分比来设置盒子的宽高，例如，把盒子的宽度设置成百分比，网页就会根据浏览器的宽度和屏幕的大小来自动调整显示效果。其换算公式如下：

$$ 目标元素宽度 / 父盒子宽度 = 百分数宽度 $$

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header,
        nav,
        section,
        footer {
            width: 980px;
            height: auto;
            margin: 0 auto;
            margin-top: 10px;
            border: 1px solid #000;
            padding: 10px;
        }
        header {
            height: 50px;
        }
        section {
            height: 300px;
        }
        footer {
            height: 30px;
        }
        aside,
        article {
            height: 100%;
            border: 1px solid #000;
            float: left;
        }
        aside {
            width: 250px;
        }
        article {
            width: 715px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <header>header</header>
    <nav>nav</nav>
    <section>
        <aside>aside</aside>
        <article>article</article>
    </section>
    <footer>footer</footer>
</body>
</html>

使用流式布局。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 80%;
            margin: 0 auto;
        }
        header,
        nav,
        section,
        footer {
            width: 95%;
            height: auto;
            margin: 0 auto;
            margin-top: 10px;
            border: 1px solid #000;
            padding: 1%;
        }
        header {
            height: 50px;
        }
        section {
            height: 300px;
        }
        footer {
            height: 30px;
        }
        aside,
        article {
            height: 100%;
            border: 1px solid #000;
            float: left;
        }
        aside {
            width: 25%;
        }
        article {
            width: 73%;
            margin-left: 1%;
        }
    </style>
</head>
<body>
    <header>header</header>
    <nav>nav</nav>
    <section>
        <aside>aside</aside>
        <article>article</article>
    </section>
    <footer>footer</footer>
</body>
</html>

弹性盒布局

什么是弹性盒布局

弹性盒布局（Flexible Box）是 CSS3 中的一种新布局模式，可以轻松地创建响应式网站布局。弹性盒布局为盒子增加了灵活性，可以让人们告别浮动（float），完美地实现垂直居中。目前它得到几乎所有主流浏览器的支持。

弹性盒由容器、 子元素 和轴构成，并且默认情况下，子元素的排布方向与横轴的方向是一致的。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求，它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 80%;
            height: 300px;
            background-color: lightgray;
        }
        .box div{
            width: 120px;
            float: left;
            height: 100px;
            background-color: bisque;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

使用弹性盒布局。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 80%;
            height: 300px;
            background-color: lightgray;
            display: flex;
            /* 纵轴排列 */
            /* flex-direction: column;  */
        }
        .box div{
            /* width: 120px; */
            flex: 1;
            /* width: 33%; */
            /* float: left; */
            height: 100px;
            background-color: bisque;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <!-- <div>4</div> -->
    </div>
</body>
</html>

弹性盒布局的常用属性

display

display 属性用于指定元素容器的类型，具体如下：

默认值为 inline ，这意味着此元素会被显示为一个内联元素，在元素前后没有换行符。
如果设置 display 的值为 flex ，则表示用于指定弹性盒的容器。
如果设置 display 的值为 none ，则表示此元素不会被显示。

当父元素的 display 设为 flex 后，子元素就会按照内容的实际宽度来显示，且子元素的高度会占满父元素的可用高度。

flex-flow

flex-flow 是 flex-direction 的值和 flex-wrap 的值的组合。

flex-direction 用于调整主轴的方向，默认情况下是横向，此时横轴为主轴，纵轴为侧轴。

取值	描述
row	弹性盒子元素按横轴方向顺序排列(默认值)
row-reverse	弹性盒子元素按横轴方向逆序排列
column	弹性盒子元素按纵轴方向顺序排列
column-reverse	弹性盒子元素按纵轴方向逆序排列

flex-wrap 用于让弹性盒元素在必要的时候换行。

取值	描述
nowrap	容器为单行，该情况下 flex 子项可能会溢出容器。该值是默认属性值，不换行
wrap	容器为多行，flex 子项溢出的部分会被放置到新行（换行），第一行显示在上方
wrap-reverse	反转 wrap 排列（换行），第一行显示在下方

例如，将 flex-direction 设为 row，将 flex-wrap 设为 nowrap，等于 flex-flow: row nowrap。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            /* width: 80px; */
            padding: 10px;
            background-color: lightgray;
            display: flex;
            /* flex-flow: row wrap-reverse; */
            /* flex-direction: column; */
        }
        .box div{
            margin: 10px;
            padding: 5PX;
            background-color: antiquewhite;
            border: 1PX solid black;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>11111111111</div>
        <div>22222222222</div>
        <div>33333333333</div>
    </div>
</body>
</html>

justify-content

justify-content 属性能够设置子元素在主轴方向的排列方式，其取值如表所示。

取值	描述
flex-start	弹性盒子元素将向行起始位置对齐（默认值）
flex-end	弹性盒子元素将向行结束位置对齐
center	弹性盒子元素将向行中间位置对齐
space-between	弹性盒子元素会平均分布在行里，第一个元素的边界与行的起始位置边界对齐，最后一个元素的边界与行结束位置的边界对齐
space-around	弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的一半

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            padding: 10px;
            background-color: lightgray;
            display: flex;
            justify-content: space-around;
        }
        .box div{
            margin: 10px;
            padding: 5PX;
            background-color: antiquewhite;
            border: 1PX solid black;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>11111111111</div>
        <div>22222222222</div>
        <div>33333333333</div>
    </div>
</body>
</html>

align-items

align-items 属性设置在父元素上，用于定义子元素在侧轴上的对齐方式，其取值如表所示。

取值	描述
flex-start	弹性盒子元素向垂直于轴的方向上的起始位置对齐
flex-end	弹性盒子元素向垂直于轴的方向上的结束位置对齐
center	弹性盒子元素向垂直于轴的方向上的中间位置对齐
baseline	如果弹性盒子元素的行内轴（页面中文字的排列方向）与侧轴方向一致，则该值与 flex-start 等效。其他情况下，该值将与基线（文字底部线条）对齐
stretch	默认值。将子元素在侧轴上拉伸以适合容器，但会受到子元素大小属性（如 " min / max-width / height “）的限制

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            padding: 10px;
            background-color: lightgray;
            display: flex;
            /* flex-direction: column; */
            /* justify-content: space-around; */
            align-items: flex-start;
            /* align-items: flex-end; */
            /* align-items: center; */
            /* align-items: baseline; */
            /* align-items: stretch; */
        }
        .box div{
            margin: 10px;
            padding: 5PX;
            background-color: antiquewhite;
            border: 1PX solid black;
            margin-right: 5px;
            /* height: 500px; */
        }
        /* .box div:nth-child(1){
            font-size: 30px;
        } */
    </style>
</head>
<body>
    <div class="box">
        <div>11111111111</div>
        <div>22222222222</div>
        <div>33333333333</div>
    </div>
</body>
</html>

order

order 属性用于设置子元素出现的排列顺序。数值越小，排列将会越靠前，默认为 0。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            padding: 10px;
            background-color: lightgray;
            display: flex;
            /* flex-flow: column; */
        }
        .box div{
            margin: 10px;
            padding: 5PX;
            background-color: antiquewhite;
            border: 1PX solid black;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="order: 2;">11111111111</div>
        <div style="order: 0;">22222222222</div>
        <div style="order: 1;">33333333333</div>
    </div>
</body>
</html>

flex

flex 属性能够设置子元素的伸缩性，它是 flex-grow（放大比例，默认为0）、flex-shrink（缩小比例，默认为 1）和 flex-basis（宽度，像素值，默认为 auto）的简写形式，后两个为可选属性。在这些属性中，最常用的是 flex-grow。

flex-grow：子元素按比例 “索取” 父元素的 “剩余空间”。
flex-shrink：子元素按比例 “吸收” 父元素超出的宽度。
flex-basis：设置子元素的占用空间（覆盖width宽度），默认为 auto。

1
2
3
4
5
6
7


当 flex-shrink 的值为 1 时，子元素不会超出父元素的宽度，设置为 0 时，子元素可以超出父元素。

当 flex-grow 属性为默认值 0 时，如果存在剩余空间，也不会放大。

如果所有项目的 flex-grow 属性都为 1，且存在剩余空间的话，那么将等分剩余空间。

如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 1000px;
            padding: 10px;
            background-color: lightgray;
            display: flex;
        }
        .box div{
            width: 50px;
            margin: 10px;
            padding: 5px;
            background-color: antiquewhite;
            border: 1PX solid black;
            margin-right: 5px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="flex: 0 1 50px;">0</div>
        <!-- <div style="flex-shrink: 5; width: 1500px;">1</div> -->
        <div style="flex-grow: 2;">2</div>
        <div style="flex-basis: 300px;">3</div>
        <div style="flex: 10 0 300px;">4</div>
    </div>
</body>
</html>

align-self

align-self 属性取值与 align-items 属性的取值类似，但是是设置在子元素上的，默认值为 auto。

取值	描述
flex-start	弹性盒子元素向垂直于轴的方向上的起始位置对齐
flex-end	弹性盒子元素向垂直于轴的方向上的结束位置对齐
center	弹性盒子元素向垂直于轴的方向上的中间位置对齐
baseline	如果弹性盒子元素的行内轴（页面中文字的排列方向）与侧轴方向一致，则该值与 flex-start 等效。其他情况下，该值将与基线对齐
stretch	默认值。如果指定侧轴大小的属性值为 auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 min / max-width / height 属性的限制

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            padding: 10px;
            background-color: lightgray;
            display: flex;
            /* align-items: center; */
        }
        .box div{
            margin: 10px;
            padding: 5PX;
            background-color: antiquewhite;
            border: 1PX solid black;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="align-self: flex-end;">111</div>
        <div style="align-self: flex-start;">222</div>
        <div style="align-self: baseline; font-size: 24px;">333</div>
        <div style="align-self: baseline;">444</div>
        <div style="align-self: stretch; height: 300px;">555</div>
    </div>
</body>
</html>

媒体查询

什么是媒体查询

媒体查询是 CSS3 新增的一种语法，用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。使用媒体查询能够在不改变页面内容的情况下，为特定的输出设备制定显示效果。媒体查询的基本语法形式如下：

1
2
3
4
5


@media mediatype and / not / only (media feature) {
    html{
        font-size: 20px;
    }
}

@media 表示声明媒体查询;
mediatype 表示媒体类型;
and、not 和 only 是逻辑操作符，用于联合构造复杂的媒体查询;
media feature 表示媒体特性。

如果当前设备符合媒体类型和媒体特性，则大括号 {} 中的 CSS 代码就会生效。

1
2
3


- 媒体类型可以设置成 screen （屏幕）、print（打印机）、speech（屏幕阅读器）或 all（所有设备）等，如果只考虑屏幕上的显示效果，则将媒体类型设为 screen 即可。

- 逻辑操作符 and 用于将多个媒体特性连接到一起，相当与 “且”；not 用于排除某个媒体特性，相当于 “非”；only 用于指定特定的媒体特性。

媒体特性是由 “属性：值” 组成的，常用的属性有 width、min-width 和 max-width，具体解释如下。

width：定义输出设备中页面可见区域的宽度。
min-width：定义输出设备中页面可见区域的最小宽度。
max-width：定义输出设备中页面可见区域的最大宽度。

媒体查询使用方式

媒体查询的使用方法有两种，即内联式和外联式。下面利用媒体查询实现当文档宽度大于等于 640px 时，对 CSS 样式进行修改。内联式是直接在 CSS 中使用，示例代码如下。

1
2
3
4
5
6


<!-- 内联式 -->
<style>
	@media screen and (min-width: 640px) {
    	CSS代码
	}
</style>

外联式是作为单独的 CSS 文件从外部引入的，示例代码如下。

1
2


<!-- 外联式 -->
<link href="style.css" media="screen and (min-width: 640px)" ref="stylesheet">

响应式布局容器

首先创建基本样式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            height: 50px;
            background-color: lightgray;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container">布局容器</div>
</body>

</html>

其中，container 类为 bootstrap 中常用的布局容器类名。

编写 CSS 代码，当媒体类型为 screen，且屏幕大于等于 576px（min-width: 576px）时，将 container 类的宽度设置为 540px，当屏幕大于等于 768px 时，将 container 类的宽度设置为 720px。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            height: 50px;
            background-color: lightgray;
            margin: 0 auto;
        }
        @media screen and (min-width: 576px){
            .container{
                width: 540px;
            }
        }
        @media screen and (min-width: 768px){
            .container{
                width: 720px;
            }
        }
        @media screen and (min-width: 992px){
            .container{
                width: 960px;
            }
        }
        @media screen and (min-width: 1200px){
            .container{
                width: 1140px;
            }
        }
    </style>
</head>

<body>
    <div class="container">布局容器</div>
</body>

</html>

Rem 适配布局

rem 单位

Rem 适配布局一般采取 Less + Rem + 媒体查询来实现响应式布局设计。使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用 rem 单位，可以通过修改 html 里面的文字大小来改变页面中的元素的大小从而进行整体控制。rem 是 CSS3 中新增的一种相对长度单位。当使用 rem 单位时，根节点 < html > 的字体大小（font-size）决定了 rem 的尺寸。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html{
        font-size: 16px;
    }
    .box{
        background: lightgray;
        width: 10rem;
        height: 10rem;
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

通过媒体查询和 rem 单位实现元素大小动态变化

利用媒体查询和rem单位，可以实现元素大小的动态变化。其开发思路是:

通过媒体查询来更改不同屏幕宽度下 < html > 的字体大小
页面中的元素盒子都使用 rem 单位，从而让它们能够进行等比例缩放

编写代码，如果屏幕宽度大于等于320px，就设置 < html > 元素根节点的 font-size 的值为 20px；如果屏幕宽度大于等于 750px，那么就设置 < html > 元素根节点的 font-size 的值为 50px；定义 div 的宽度和高度分别为 10rem。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        background: lightgray;
        width: 10rem;
        height: 10rem;
    }
    @media screen and (min-width: 500px) {
        html{
            font-size: 30px;
        }
    }
    @media screen and (min-width: 750px) {
        html{
            font-size: 50px;
        }
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

Sass

什么是 Sass

在 Node.js 环境中使用 Sass

Sass 语法格式

Sass 编译

Sass 嵌套

Sass 运算

Less

练习

制作移动端页面哪个布局方式不适合？（）
- A. 响应式 Responsive（使用 @media 媒体查询，给不同尺寸和介质的设备切换不同的样式）
- B. 伸缩 Flexbox（使用 CSS3 Flex 系列属性进行相对布局）
- C. 固定 Fixed（使用 px 和 pt 这样的绝对单位进行固定布局）
- D. 流动 Fluid（使用 % 百分比进行相对布局）
采用流式布局方式进行移动端页面布局时，各内容区块最好采用（）。
- A．标准布局
- B．浮动布局
- C．相对定位布局
- D．绝对定位布局
HTML5 提供了（）方法用于关闭全屏显示。
- A. exitFullscreen()
- B. closeFullscreen()
- C. requestFullscreen
- D. overFullscreen
当手指触摸屏幕是触发的是什么事件？（）
- A. ontouchstart
- B. ontouchcancle
- C. touchstart
- D. ontouch
在拖曳操作中，（）和（）默认是可以拖曳的？
- A. 图片和视频
- B. 链接和文字
- C. 文字和图片
- D. 图片和链接
下列选项中，说法错误的是（）。
- A. window.sessionStorage 对象用于区域存储
- B. window.localStorage 对象用于本地存储
- C. Web Storage 接口提供的 clear(key) 方法，用于删除键名为 key 的存储内容
- D. 使用 sessionStorage 存储的数据，当浏览器关闭后，内存将被自动清除
设置一个盒子的样式如下，此时该盒子的大小为多少？
1 2 3 4 5 6

box-sizing: border-box; margin-top: 28.54px; margin-bottom: 14.63px; padding: 0 16.44px; width: 72px; height: 60px;
- A. 宽 88.44px 高 60px
- B. 宽 88.44px 高 103.17px
- C. 宽 72px 高 103.17px
- D. 宽 72px 高 60px
使用媒体查询设置屏幕高度大于等于 500px 时，字体大小变为 32px，正确的代码是？（）
- A. @media screen when (min-width: 500px){ html{ font-size: 32px; } }
- B. @media screen and (min-height: 500px){ html{ font-size: 32px; } }
- C. @media screen and (max-width: 500px){ html{ font-size: 32px; } }
- D. @media screen and (max-height: 500px){ html{ font-size: 32px; } }

关于下列代码说法正确的是？（）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<style>
    .box{
        height: 500px;
        width: 500px;
        display: flex;
        flex-flow: row-reverse wrap;
    }
    .box div{
        width: 200px;
        margin: 10px;
    }
    .box div:nth-child(1){
        align-self: stretch;
        width: 600px;
    }
</style>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

A. 页面中 < div >1< /div > < div >2< /div > < div >3< /div > 都在同一行显示
B. 页面中 < div >1< /div > 的宽度是 < div >2< /div > 的 3 倍
C. 页面中元素从上到下从左到右依次是 < div >1< /div > < div >3< /div > < div >2< /div >
D. 通过 display: flex; 设置弹性盒布局，当屏幕大小变化时页面元素的大小也会随之变化

下列说法正确的是？（）
- A. 当 flex-shrink 的值为 1 时，子元素可以超出父元素的宽度
- B. 如果一个项目的 flex-grow 属性为 5，其他项目都为 1，则前者宽度是其他元素的 5 倍
- C. align-items 属性为 baseline，表示行内轴与侧轴方向一致时，子元素基线对齐
- D. flex-direction 用于调整主轴的方向，默认情况下横轴为主轴，纵轴为侧轴