【Flex 布局介绍】
什么是Flex布局
# 1 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现
# 2 Flex 是 Flexible Box 或 flexbox 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
# 3 任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
# 4 行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
flex布局的好处
#1 简单易懂：与传统的布局方式相比，Flex布局的语法和理解起来更加简单，容易上手。 #2 弹性和自适应：Flex布局能够自动适应不同尺寸的屏幕，让页面更具有弹性。 #3 等高布局：Flex布局可以方便地实现多列等高布局。 #4 对齐和排序：Flex布局支持各种对齐方式，包括水平和垂直对齐，并且可以通过设置order属性对子元素进行排序。 #5 可以与传统布局结合使用：Flex布局并不是完全取代传统的布局方式，它可以与传统布局方式结合使用，实现更灵活的布局效果
概念
# 1 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
-容器和项目：container、item
# 2 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
-主轴和交叉轴：main axis、cross axis
# 3 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
-起始位置：
main start 主轴起始位置
cross start 侧轴起始位置
-结束位置：
main end 主轴结束位置
cross start 侧轴结束位置
# 4 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
-主轴尺寸
-侧轴尺寸
。
。
【容器样式属性(6个)】
1 # 1 flex-direction：决定主轴的方向。 2 # 2 flex-wrap：如果一条轴线排不下，如何换行。 3 # 3 flex-flow：flex-direction 属性和 flex-wrap 属性的简写属性。 4 # 4 justify-content：定义项目在主轴上的对齐方式。 5 # 5 align-items：定义项目在交叉轴上如何对齐。 6 # 6 align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 7 8 -------------------------------------------------------------------
flex-direction
# 1 flex-direction属性决定主轴的方向（即项目的排列方向） # 2 有4个值（如下图） row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 # 3 强调：使用 flex-direction属性后，因为主轴的位置发生了改变，使用和主轴或交叉轴有关的属性之前一定要确定好主轴的位置
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 /* row（默认值）：主轴为水平方向，起点在左端。 */
15 flex-direction: row; /* row-reverse column column-reverse */
16 }
17
18 .box div {
19 width: 100px;
20 height: 100px;
21 background-color: pink;
22 border: 1px solid red;
23
24 }
25 </style>
26 </head>
27 <body>
28 <div class="box">
29 <div>1</div>
30 <div>2</div>
31 <div>3</div>
32 <div>4</div>
33 <div>5</div>
34 <div>6</div>
35
36 </div>
37 </body>
38 </html>
flex-wrap
# 1 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
# 2 flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向
# 3 3个值 flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap 不换行
- wrap 换行，第一行在上方
- wrap-reverse 换行，第一行在下方
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 /* row（默认值）：主轴为水平方向，起点在左端。 */
15 flex-direction: row;
16 /*flex-wrap: nowrap; nowrap 默认值 */
17 /*flex-wrap: wrap; /* wrap 换行，第一行在上方 */
18 flex-wrap: wrap-reverse; /* wrap-reverse 换行，第一行在下方 */
19 }
20
21 .box div {
22 width: 100px;
23 height: 100px;
24 background-color: pink;
25 border: 1px solid red;
26
27 }
28 </style>
29 </head>
30 <body>
31 <div class="box">
32 <div>1</div>
33 <div>2</div>
34 <div>3</div>
35 <div>4</div>
36 <div>5</div>
37 <div>6</div>
38 <div>7</div>
39 <div>8</div>
40 <div>9</div>
41
42 </div>
43 </body>
44 </html>
flex-flow
# 1 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: flex-direction || flex-wrap;
}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 /*flex-flow: row nowrap;*/
15 flex-flow: column wrap;
16 /*flex-flow: row nowrap;*/
17 }
18
19 .box div {
20 width: 100px;
21 height: 100px;
22 background-color: pink;
23 border: 1px solid red;
24
25 }
26 </style>
27 </head>
28 <body>
29 <div class="box">
30 <div>1</div>
31 <div>2</div>
32 <div>3</div>
33 <div>4</div>
34 <div>5</div>
35 <div>6</div>
36 <div>7</div>
37 <div>8</div>
38 <div>9</div>
39
40 </div>
41 </body>
42 </html>
justify-content
# 1 justify-content属性定义了项目在主轴上的对齐方式
# 2 6个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly：项目与项目之间，项目与边框之间的间隔都相等
justify-content: flex-start(左对齐:默认值)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row wrap;
15 justify-content: flex-start
16 }
17
18 .box div {
19 width: 100px;
20 height: 100px;
21 background-color: pink;
22 border: 1px solid red;
23
24 }
25 </style>
26 </head>
27 <body>
28 <div class="box">
29 <div>1</div>
30 <div>2</div>
31 <div>3</div>
32
33 </div>
34 </body>
35 </html>
justify-content: flex-end;右对齐
justify-content: center; 居中
justify-content: space-between;两端对齐，项目之间的间隔都相等
justify-content: space-around;每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
justify-content: space-evenly;项目与项目之间，项目与边框之间的间隔都相等
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row wrap;
15 justify-content: flex-start;/* 左对齐 */
16 justify-content: flex-end;/* 右对齐 */
17 justify-content: center;/* 居中 */
18 justify-content: space-between;/* 两端对齐，项目之间的间隔都相等 */
19 justify-content: space-around;/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
20 justify-content: space-evenly;/*项目与项目之间，项目与边框之间的间隔都相等*/
21 }
22
23 .box div {
24 width: 100px;
25 height: 100px;
26 background-color: pink;
27 border: 1px solid red;
28
29 }
30 </style>
31 </head>
32 <body>
33 <div class="box">
34 <div>1</div>
35 <div>2</div>
36 <div>3</div>
37
38 </div>
39 </body>
40 </html>
align-items
# 1 align-items属性定义项目在交叉轴上如何对齐。
# 2 align-items: flex-start | flex-end | center | baseline | stretch 5个值
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度
align-items:flex-start;交叉轴的起点对齐
align-items:flex-end;交叉轴的终点对齐
align-items:center;交叉轴的中点对齐
align-items:baseline;项目的第一行文字的基线对齐
1 <style>
2 .box {
3 width: 800px;
4 height: 400px;
5 border: 1px solid black;
6 margin: auto; /* box 居中*/
7 /* 使用弹性布局 */
8 display: flex;
9 flex-flow: row wrap;
10 justify-content: flex-start; /* 左对齐 */
11 justify-content: flex-end; /* 右对齐 */
12 justify-content: center; /* 居中 */
13 justify-content: space-between; /* 两端对齐，项目之间的间隔都相等 */
14 justify-content: space-around; /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
15 justify-content: space-evenly; /*项目与项目之间，项目与边框之间的间隔都相等*/
16
17 align-items: flex-start; /*交叉轴的起点对齐*/
18 align-items: flex-end; /*交叉轴的终点对齐*/
19 align-items: center; /*交叉轴的中点对齐*/
20 align-items: baseline; /*项目的第一行文字的基线对齐*/
21 }
22
23 .box div {
24 width: 100px;
25 height: 100px;
26 background-color: pink;
27 border: 1px solid red;
28
29 }
30
31 .box div:nth-child(1) {
32 padding-top: 10px;
33 }
34
35 .box div:nth-child(2) {
36 padding-top: 15px;
37 }
38
39 .box div:nth-child(4) {
40 padding-top: 20px;
41 }
42 </style>
43
44
45 <div class="box">
46 <div>1</div>
47 <div>2</div>
48 <div>3</div>
49 <div>4</div>
50 <div>5</div>
51 <div>6</div>
52
53 </div>
align-items:stretch;（默认值）如果项目未设置高度或设为 auto，将占满整个容器的高度
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row wrap;
15 justify-content: flex-start; /* 左对齐 */
16 justify-content: flex-end; /* 右对齐 */
17 justify-content: center; /* 居中 */
18 justify-content: space-between; /* 两端对齐，项目之间的间隔都相等 */
19 justify-content: space-around; /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
20 justify-content: space-evenly; /*项目与项目之间，项目与边框之间的间隔都相等*/
21
22 align-items: flex-start; /*交叉轴的起点对齐*/
23 align-items: flex-end; /*交叉轴的终点对齐*/
24 align-items: center; /*交叉轴的中点对齐*/
25 align-items: baseline; /*项目的第一行文字的基线对齐*/
26 align-items: stretch;; /*默认值）如果项目未设置高度或设为 auto，将占满整个容器的高度*/
27 }
28
29 .box div {
30 width: 100px;
31 /*height: 100px;*/
32 background-color: pink;
33 border: 1px solid red;
34
35 }
36
37 .box div:nth-child(1) {
38 padding-top: 10px;
39 }
40
41 .box div:nth-child(2) {
42 padding-top: 15px;
43 }
44
45 .box div:nth-child(4) {
46 padding-top: 20px;
47 }
48 </style>
49 </head>
50 <body>
51 <div class="box">
52 <div>1</div>
53 <div>2</div>
54 <div>3</div>
55 <div>4</div>
56 <div>5</div>
57 <div>6</div>
58
59 </div>
60 </body>
61 </html>
align-content属性
# 1 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
-允许项目换行【flex-wrap: wrap】，使用align-content属性的前提，否则align-content属性不生效
# 2 align-content: flex-start | flex-end | center | space-between | space-around | stretch; 6个值
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
#3 align-content的属性值和前面的都一样， 只需要注意在使用align-content的属性之前一定要加上 flex-wrap: wrap;属性
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row wrap;
15
16 /* flex-start：与交叉轴的起点对齐。 */
17 align-content: flex-start;
18 /* flex-end：与交叉轴的终点对齐。 */
19 align-content: flex-end;
20 /* center：与交叉轴的中点对齐。 */
21 align-content: center;
22 /* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 */
23 align-content: space-between;
24 /* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */
25 align-content: space-around;
26 /* stretch（默认值）：轴线占满整个交叉轴。 */
27 align-content: stretch;
28
29
30 }
31
32 .box div {
33 width: 100px;
34 height: 100px; /*align-content: stretch 不设置高度*/
35 background-color: pink;
36 border: 1px solid red;
37
38 }
39
40
41 </style>
42 </head>
43 <body>
44 <div class="box">
45 <div>1</div>
46 <div>2</div>
47 <div>3</div>
48 <div>4</div>
49 <div>5</div>
50 <div>6</div>
51 <div>7</div>
52 <div>8</div>
53 <div>9</div>
54
55 </div>
56 </body>
57 </html>
。
。
。
【项目样式属性】
#1 以下6个属性设置在项目上。 order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0 flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大 flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小 flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为 auto，即项目的本来大小 flex： flex-grow 、 flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选 align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto
order属性
# 1 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
# 2 .item { order: integer;}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row wrap;
15
16 /* flex-start：与交叉轴的起点对齐。 */
17 align-content: flex-start;
18 /* flex-end：与交叉轴的终点对齐。 */
19 align-content: flex-end;
20 /* center：与交叉轴的中点对齐。 */
21 align-content: center;
22 /* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 */
23 align-content: space-between;
24 /* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */
25 align-content: space-around;
26 /* stretch（默认值）：轴线占满整个交叉轴。 */
27 align-content: stretch;
28
29
30
31
32
33
34
35
36
37
38 }
39
40 .box div {
41 width: 100px;
42 height: 100px; /*align-content: stretch 不设置高度*/
43 background-color: pink;
44 border: 1px solid red;
45
46 }
47 .box div:nth-child(1){
48 order: -1;
49 }
50 .box div:nth-child(2){
51 order: 2;
52 }
53 .box div:nth-child(3){
54 order: 4;
55 }
56 .box div:nth-child(4){
57 order: 0;
58 }
59 .box div:nth-child(5){
60 order: 3;
61 }
62 .box div:nth-child(6){
63 order: 7;
64 }
65
66 </style>
67 </head>
68 <body>
69 <div class="box">
70 <div>1</div>
71 <div>2</div>
72 <div>3</div>
73 <div>4</div>
74 <div>5</div>
75 <div>6</div>
76 <div>7</div>
77
78 </div>
79 </body>
80 </html>
flex-grow属性
# 1 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
# 2 item { flex-grow: number; /* default 0 */}
# 3 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
均匀分布
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row wrap;
15
16 /* flex-start：与交叉轴的起点对齐。 */
17 align-content: flex-start;
18 /* flex-end：与交叉轴的终点对齐。 */
19 align-content: flex-end;
20 /* center：与交叉轴的中点对齐。 */
21 align-content: center;
22 /* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 */
23 align-content: space-between;
24 /* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */
25 align-content: space-around;
26 /* stretch（默认值）：轴线占满整个交叉轴。 */
27 align-content: stretch;
28
29
30 }
31
32 .box div {
33 width: 100px;
34 height: 100px; /*align-content: stretch 不设置高度*/
35 background-color: pink;
36 border: 1px solid red;
37
38 }
39
40 .box div:nth-child(1) {
41 flex-grow: 1;
42 }
43
44 .box div:nth-child(2) {
45 flex-grow: 1;
46 }
47
48 .box div:nth-child(3) {
49 flex-grow: 1;
50 }
51
52 </style>
53 </head>
54 <body>
55 <div class="box">
56 <div>1</div>
57 <div>2</div>
58 <div>3</div>
59
60 </div>
61 </body>
62 </html>
中间占两倍，两边一样大
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row wrap;
15
16 /* flex-start：与交叉轴的起点对齐。 */
17 align-content: flex-start;
18 /* flex-end：与交叉轴的终点对齐。 */
19 align-content: flex-end;
20 /* center：与交叉轴的中点对齐。 */
21 align-content: center;
22 /* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 */
23 align-content: space-between;
24 /* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */
25 align-content: space-around;
26 /* stretch（默认值）：轴线占满整个交叉轴。 */
27 align-content: stretch;
28
29
30 }
31
32 .box div {
33 width: 100px;
34 height: 100px; /*align-content: stretch 不设置高度*/
35 background-color: pink;
36 border: 1px solid red;
37
38 }
39
40 .box div:nth-child(1){
41 flex-grow: 1;
42 }
43 .box div:nth-child(2){
44 flex-grow: 2;
45 }
46 .box div:nth-child(3){
47 flex-grow: 1;
48 }
49
50
51 </style>
52 </head>
53 <body>
54 <div class="box">
55 <div>1</div>
56 <div>2</div>
57 <div>3</div>
58
59 </div>
60 </body>
61 </html>
flex-shrink属性
# 1 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
# 2 .item { flex-shrink: number; /* default 1 */}
# 3 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
# 4 负值对该属性无效
等比例缩小
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row nowrap;
15
16
17 }
18
19
20 .box div {
21 width: 400px;
22 height: 100px;
23 background-color: pink;
24 border: 1px solid red;
25
26 }
27
28 .box div:nth-child(1) {
29 flex-shrink: 1;
30 }
31
32 .box div:nth-child(2) {
33 flex-shrink: 1;
34 }
35
36 .box div:nth-child(3) {
37 flex-shrink: 1;
38 }
39 .box div:nth-child(4) {
40 flex-shrink: 1;
41 }
42
43
44
45 </style>
46 </head>
47 <body>
48 <div class="box">
49 <div>1</div>
50 <div>2</div>
51 <div>3</div>
52 <div>4</div>
53
54 </div>
55 </body>
56 </html>
为0的情况
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row nowrap;
15
16
17 }
18
19
20 .box div {
21 width: 400px;
22 height: 100px;
23 background-color: pink;
24 border: 1px solid red;
25
26 }
27
28 .box div:nth-child(1) {
29 flex-shrink: 1;
30 }
31
32 .box div:nth-child(2) {
33 flex-shrink: 0;
34 }
35
36 .box div:nth-child(3) {
37 flex-shrink: 1;
38 }
39 .box div:nth-child(4) {
40 flex-shrink: 1;
41 }
42
43
44
45 </style>
46 </head>
47 <body>
48 <div class="box">
49 <div>1</div>
50 <div>2</div>
51 <div>3</div>
52 <div>4</div>
53
54 </div>
55 </body>
56 </html>
flex-basis属性
# 1 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
# 2 .item { flex-basis: length | auto; /* default auto */}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row nowrap;
15
16
17 }
18
19
20 .box div {
21 width: 100px;
22 height: 100px;
23 background-color: pink;
24 border: 1px solid red;
25
26 }
27
28 .box div:nth-child(2) {
29 /* 将项目2的宽度设为200px */
30 flex-basis: 200px;
31 }
32
33
34 </style>
35 </head>
36 <body>
37 <div class="box">
38 <div>1</div>
39 <div>2</div>
40 <div>3</div>
41 <div>4</div>
42
43 </div>
44 </body>
45 </html>
flex属性
# 1 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto。后两个属性可选。
# 2 .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
# 3 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
# 4 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
# 5 一般情况下flex属性用于将项目平均占满空间
.box div {
/* 使所有项目平均占满空间 */
flex: 1;
}
align-self属性
# 1 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
# 2 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}
# 3 该属性可能取6个值，除了auto，其他都与align-items属性完全一致
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 flex-flow: row nowrap;
15
16
17 }
18
19
20 .box div {
21 width: 100px;
22 height: 100px;
23 background-color: pink;
24 border: 1px solid red;
25 flex: 1;
26
27 }
28 .box div:nth-child(2) {
29 /* 使第二个项目在交叉轴上终点对齐 */
30 align-self: flex-end;
31 }
32
33
34
35 </style>
36 </head>
37 <body>
38 <div class="box">
39 <div>1</div>
40 <div>2</div>
41 <div>3</div>
42 <div>4</div>
43
44 </div>
45 </body>
46 </html>
案例
元素垂直居中
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 width: 800px;
9 height: 400px;
10 border: 1px solid black;
11 margin: auto; /* box 居中*/
12 /* 使用弹性布局 */
13 display: flex;
14 /* 使项目在主轴上中心对齐 */
15 justify-content: center;
16 /* 使项目在交叉轴上中心对齐 */
17 align-items: center;
18
19
20 }
21
22
23 .box div {
24 width: 100px;
25 height: 100px;
26 background-color: pink;
27 border: 1px solid red;
28
29
30 }
31
32
33
34 </style>
35 </head>
36 <body>
37 <div class="box">
38 <div></div>
39
40
41 </div>
42 </body>
43 </html>
圣杯布局
1.中间内容部分优先加载
2.两侧导航栏宽度固定不变，中间部分自动填充整个区域
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box {
8 /* 将盒子进行弹性布局 */
9 display: flex;
10 }
11
12 .left {
13 width: 100px;
14 height: 200px;
15 background-color: green;
16 /* 将左边导航栏的order设置最小，这样就可以跑到左边 */
17 order: -1;
18 }
19
20 .center {
21 background-color: pink;
22 height: 400px;
23 /* 内容区域自动占满剩余空间 */
24 flex: 1;
25 }
26
27 .right {
28 width: 200px;
29 height: 200px;
30 background-color: yellow;
31 }
32 </style>
33 </head>
34 <body>
35 <div class="box">
36 <div class="center"></div>
37 <div class="left"></div>
38 <div class="right"></div>
39 </div>
40 </body>
41 </html>
。
小米商城案例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .container {
8 width: 1100px;
9 margin: 0 auto;
10 }
11
12 .row1 {
13 display: flex;
14 flex-direction: row;
15 justify-content: space-between;
16 }
17
18 .row1 .company {
19 width: 210px;
20 height: 180px;
21 background-color: saddlebrown;
22 }
23
24 .row1 .pic {
25 width: 266px;
26 height: 180px;
27 background-color: cadetblue;
28 }
29
30 .row2 .title {
31 display: flex;
32 flex-direction: row;
33 justify-content: space-between;
34 }
35
36 .row2 .pic-list {
37 display: flex;
38 flex-direction: row;
39 justify-content: space-between;
40 }
41
42 .row2 .pic-list .big {
43 background-color: aquamarine;
44 height: 610px;
45 width: 210px;
46 margin-right: 20px;
47 }
48
49 .row2 .pic-list .right-list {
50 background-color: antiquewhite;
51 flex-grow: 1;
52 }
53
54 .row2 .pic-list .right-list .group {
55 display: flex;
56 flex-direction: row;
57 justify-content: space-between;
58 flex-wrap: wrap;
59 }
60
61 .row2 .pic-list .right-list .phone {
62 margin-bottom: 10px;
63 border: 1px solid red;
64 width: 200px;
65 height: 300px;
66 }
67
68 .course-list {
69 display: flex;
70 justify-content: space-between;
71 flex-wrap: wrap;
72 }
73
74 .course-list .item {
75 width: 24%;
76 height: 100px;
77 background-color: skyblue;
78 margin-top: 15px;
79 }
80 /*如果最后一个元素，是第3个，右边距=一个位置 + 所有空白位置/3（有三个空白位置）*/
81 .course-list .item:last-child:nth-child(4n - 1) {
82 margin-right: calc(24% + 4% / 3);
83 }
84 .course-list .item:last-child:nth-child(4n - 2) {
85 margin-right: calc(48% + 8% / 3);
86 }
87 </style>
88 </head>
89 <body>
90
91 <div class="container">
92
93 <div class="row1">
94 <div class="company"></div>
95 <div class="pic"></div>
96 <div class="pic"></div>
97 <div class="pic"></div>
98 </div>
99
100 <div class="row2">
101 <div class="title">
102 <div>手机</div>
103 <div>查看更多</div>
104 </div>
105
106 <div class="pic-list">
107 <div class="big"></div>
108 <div class="right-list">
109 <div class="group">
110 <div class="phone"></div>
111 <div class="phone"></div>
112 <div class="phone"></div>
113 <div class="phone"></div>
114 </div>
115 <div class="group">
116 <div class="phone"></div>
117 <div class="phone"></div>
118 <div class="phone"></div>
119 <div class="phone"></div>
120 </div>
121 </div>
122 </div>
123 </div>
124
125 <div class="course-list">
126 <div class="item"></div>
127 <div class="item"></div>
128 <div class="item"></div>
129 <div class="item"></div>
130 <div class="item"></div>
131 <div class="item"></div>
132
133 </div>
134 </div>
135
136 </body>
137 </html>
标签：box,Flex,flex,align,布局,content,对齐,div From： https://www.cnblogs.com/liuliu1/p/18212643