CSS中的flex布局，主要选项及可选值的含义
附带实例代码及效果图
image.png

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS flex 布局</title>

    <style>

        .container {

            width: 1300px;

            height: 1200px;

            background-color: rgb(164, 236, 188);

            /* gap: 5px; */

            /* display开启flex布局 */

            display: flex;

  

            /* 元素排列方向

                row 默认值，按行顺序排列

                row-reverse 按行倒序排列

                column  按列顺序排列

                column-reverse 按列倒序排列

            */

            flex-direction: row;

  

            /*

                justify-content决定每行中元素之间的间隔问题

                flex-start  默认值，从行首起始位置开始排列，无间隔

                flex-end    从行尾位置开始排列，无间隔

                center      居中排列，最左边和最右边间隔相等，元素之间无间隔

                space-between   均匀排列每个元素，左右贴边，中间间隔相等

                space-evenly    均匀排列每个元素，每个元素左右的间隔都相等

                space-around    均匀排列每个元素，每个元素左右分配相同的空间（可叠加，导致中间的间隔比左右两边的大）

            */

            justify-content: space-around;

  

            /* *********************************************************************************************************************** */

            /* align-items：与align-content类似，都是控制垂直位置的，align-items作用于一行或多行，而align-content理论上只作用于多行，

                实际上执行可能依然有效果，但可能兼容性有问题，当成一种规范吧

                主轴方向在垂直方向的位置排列，如主轴为横轴，align-items就决定每行的垂直位置分布

                默认是normal

                center：居中，每行之间的距离相等

                flex-start：根据元素的行数，将容器分成几份，每行元素的上面顶着每份的边缘

                flex-end：根据元素的行数，将容器分成几份，每行元素的下面挨着每份的边缘

                baseline：不常用，不清楚，元素位于容器的基线上。

            */

            /* align-items: flex-end; */

  

            /* flex-wrap 一行装不下时，是否换行

                nowrap  默认值。规定灵活的项目不换行或不换列。

                wrap    规定灵活的项目在必要的时候换行或换列。

                wrap-reverse    规定灵活的项目在必要的时候换行或换列，但是以相反的顺序。（第一行在最下面，最后一行在最上面）

            */

            flex-wrap: wrap;

  

            /*

            align-content 决定每行之间的间隔问题

                flex-start  默认值，从容器起始位置开始排列，无间隔

                flex-end    从容器行尾位置开始排列，无间隔

                center      居中排列，最左边和最右边间隔相等，每行之间无间隔

                space-between   均匀排列每个元素，上下贴边，中间间隔相等

                space-evenly    均匀排列每个元素，每个元素上下的间隔都相等

                space-around    均匀排列每个元素，每个元素上下分配相同的空间（可叠加，导致中间的间隔比左右两边的大）

            */

            align-content: flex-start;

  

            /* flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。 */

            /* flex-flow:row-reverse wrap; */

  
  

        }

        .box {

            width: 200px;

            height: 200px;

            background-color: aquamarine;

            border-radius: 12px;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="box">盒子1</div>

        <div class="box">盒子2</div>

        <div class="box">盒子3</div>

        <div class="box">盒子4</div>

        <div class="box">盒子5</div>

  

        <div class="box">盒子6</div>

        <div class="box">盒子7</div>

        <div class="box">盒子8</div>

        <div class="box">盒子9</div>

        <div class="box">盒子10</div>

  

        <div class="box">盒子11</div>

        <div class="box">盒子12</div>

        <div class="box">盒子13</div>

        <div class="box">盒子14</div>

        <div class="box">盒子15</div>

    </div>

</body>

</html>

最后附上，个人博客网站：Southblock’Blog，内容更多，更新，欢迎参观。