872 字

4 分钟

Flex布局

2026-03-15

无标签

之前在暑假的时候自己写过一段事件的小程序，当时对于Flex布局有过初步的了解，当时在写完小程序之后我还记得我说过，布局只要有Flex和Grid其他的都不重要。当时觉得这个布局十分的好用，但是并没有深入的去了解，但是经过深度学习之后，感觉比自己去摸索懂得会更透彻一些。

概念#

Flex布局元素：

Flex容器：采用Flex布局的元素，作为父元素
Flex项目：Flex布局内的子元素

Flex容器中有以下两个基本的概念：

主轴（main axis）：控制项目顺序的轴，方向根据flex-direction改变
交叉轴（cross axis）：与主轴水平垂直的轴

容器的属性#

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-cotent

`flex-direction`#

row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上方
column-reverse：主轴为垂直方向，起点在下方

`flex-wrap`#

nowrap（默认值）：不换行
wrap：自动换行，第一行在开头
wrap-reverse：自动换行，第一行在末尾

`justify-content`#

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端贴边，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等，项目到边距的间距是两个项目的一半
space-evenly：每个项目之间，项目和边距之间相等

`align-items`#

stretch（默认值）：默认拉伸填满整个容器
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐

`align-content`（只有设置`flex-wrap`属性之后才会生效）#

flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
cneter：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
space-evenly：每行之间，边上两行到边距的距离都相等

`flex-flow`（`flex-direction`属性和`flex-wrap`属性的简写形式）#

格式：flex-flow: <flex-direction> <flex-wrap>

项目的属性#

order：设置排序顺序

项目展示#

源码#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>05 响应式表单布局</title>
7
    <style>
8
:root {
9
  --primary-color: #4a6ee0;
10
  --primary-light: #eef2ff;
11
  --primary-dark: #3a5ac8;
12
  --text-primary: #2d3748;
13
  --text-secondary: #718096;
14
  --border-color: #e2e8f0;
15
  --background-color: #f8fafc;
16
  --white: #ffffff;
17
  --success-color: #48bb78;
18
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
19
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
20
  --transition: all 0.3s ease;
21
}
22

23
body {
24
  background-color: var(--background-color);
25
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
26
  line-height: 1.6;
27
  color: var(--text-primary);
28
  padding: 20px;
29
  min-height: 100vh;
30
}
31

32
form {
33
  max-width: 900px;
34
  margin: 0 auto;
35
  padding: 40px;
36
  box-sizing: border-box;
37
  border-radius: 12px;
38
  font-size: 16px;
39
  background-color: var(--white);
40
  box-shadow: var(--shadow);
41
  transition: var(--transition);
42
}
43

44
form:hover {
45
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
46
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
47
}
48

49
label {
50
  color: var(--text-primary);
51
  font-weight: 500;
52
  transition: var(--transition);
53
}
54

55
input {
56
  font-size: 16px;
57
  color: var(--text-primary);
58
  outline: none;
59
  padding: 12px 16px;
60
  border-radius: 8px;
61
  border: 1px solid var(--border-color);
62
  box-sizing: border-box;
63
  transition: var(--transition);
64
  background-color: var(--white);
65
}
66

67
input:focus {
68
  border-color: var(--primary-color);
69
  box-shadow: 0 0 0 3px rgba(74, 110, 224, 0.2);
70
}
71

72
input:valid {
73
  border-color: var(--border-color);
74
}
75

76
input:valid:focus {
77
  border-color: var(--primary-color);
78
}
79

80
.submit {
81
  color: var(--white);
82
  background-color: var(--primary-color);
83
  cursor: pointer;
84
  font-weight: 600;
85
  border: none;
86
  padding: 14px 16px;
87
  transition: var(--transition);
88
}
89

90
.submit:hover {
91
  background-color: var(--primary-dark);
92
  transform: translateY(-2px);
93
}
94

95
.submit:active {
96
  transform: translateY(0);
97
}
98

99
    </style>
100
</head>
101
<body>
102
<style>
103
  /* 请使用 flexbox 布局实现响应式表单 */
104
  form {
105
    display: flex;
106
    align-items: flex-end;
107
    gap: 24px;
108
    flex-wrap: wrap;
109
  }
110
  .name, .password {
111
    display: flex;
112
    flex-direction: column;
113
    gap: 8px;
114
  }
115
  .name, .password, .submit {
116
    flex: 1 1 200px;
117
  }
118
</style>
119
<form action="#" method="post">
120
  <label for="name" class="name"
121
    >姓名：
122
    <input type="text" id="name" name="name" required="" />
123
  </label>
124
  <label for="password" class="password"
125
    >密码：
126
    <input type="password" id="password" name="password" required="" />
127
  </label>
128
  <input type="submit" class="submit" value="提交" />
129
</form>
130

131
    <script>
132

133
    </script>
134
</body>
135
</html>