CSS3 弹性盒子(flex、flex-direction属性、flex-wrap属性、align-items属性、align-content属性)详解_css flex-wrap

作者：小丑西瓜9 | 2024-03-14 13:28:39

踩

css flex-wrap

文章目录

flex
flex-direction 属性
flex-wrap 属性
align-items 属性
align-content 属性的使用

flex

在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。 flex 主要由两个轴来控制布局，如下图所示。

上图说明如下：
main axis 是主轴，该轴的开始为 main start，结束为 main end。
cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
flex item 是 flex 容器中的元素。

flex-direction 属性

flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。其语法格式为：

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

其属性值的意义如下所示：

在这里插入图片描述

<!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>
      .content1 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row; /*默认值，行对齐，主轴起点与终点相同*/
      }
      .content2 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse; /*行对齐，主轴起点与终点相反*/
      }
      .content3 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column; /*列对齐，主轴起点与终点相同*/
      }
      .content4 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse; /*列对齐，主轴起点与终点相反*/
      }
      .box {
        width: 50px;
        height: 50px;
        color: black;
      }
    </style>
  </head>
  <body>
    <div class="content1">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content2">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content3">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content4">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

在这里插入图片描述

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。其语法格式为：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
1

其属性值的意义如下所示：

<!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>
      div {
        width: 100px;
        height: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">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
36
37
38
39

在这里插入图片描述

align-items 属性

align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。其语法格式为：

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

其属性值的意义如下所示：

<!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>
      div {
        width: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        align-items: stretch;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">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
36
37
38

在这里插入图片描述

align-content 属性的使用

align-content 属性可以用于控制多行的对齐方式，如果只有一行则不会起作用。其语法格式为：

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

其属性值的意义为：

<!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>
      div {
        width: 60px;
        color: black;
      }
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
      }
      .left {
        background-color: gray;
      }
      .center {
        background-color: silver;
      }
      .right {
        background-color: darkgray;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="left">div1块</div>
      <div class="center">div2块</div>
      <div class="right">div3块</div>
      <div class="left">div4块</div>
      <div class="center">div5块</div>
      <div class="right">div6块</div>
      <div class="left">div7块</div>
      <div class="center">div8块</div>
      <div class="right">div9块</div>
      <div class="left">div10块</div>
      <div class="center">div11块</div>
      <div class="right">div12块</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
36
37
38
39
40
41
42
43
44
45
46
47

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/234804