一、前言

flex 是 flexible Box 的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定 flex 布局。

二、布局原理

采用 flex 布局的元素成为 flex 容器。其所有子元素会自动成为容器成员,成为 flex 项目。

通过给 flex 容器添加 flex 属性来控制 flex 项目的位置和排列方式。

注意:当父盒子设置为 flex 布局后,其子元素的 float、clear 和 vertical-align 属性会失效。

三、flex 中的概念

在 flex 布局中,分为主轴侧轴两个方向。

默认情况下,主轴为 x 轴方向,水位向右。

默认情况下,侧轴为 y 轴方向,垂直向下。

四、flex 属性

使用 flex 属性,首先父容器要设置 display: flex; 将自身容器变成弹性布局,之后才能使用其他属性。

4.1 flex-direction

  • 作用:设置主轴的方向

  • 设置范围:父容器

  • 属性值

属性值说明
row默认值,从左到右,主轴为 x 轴
row-reverse从右往左,主轴为 x 轴
column从上到下,主轴为 y 轴
column-reverse从下到上,主轴为 y 轴
  • 演示
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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>flex 布局</title>
<style>
* {margin: 0;padding: 0;} .parent {width: 600px;height: 330px;background: pink;display: flex;margin: 100px auto;}
.child {width: 100px;height: 100px;background: aliceblue;margin-bottom: 10px; margin-right: 10px;text-align: center;}
.option {width: 600px;height: 100px;margin: 0 auto;} .option ul {list-style: none;margin-top: 20px;}
.option ul li {margin-bottom: 10px;} .option button {width: 120px;height: 32px;}
</style>
</head>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3</span>
</div>
<div class="option">
<h3>flex-direction:<span id="curVal">row</span></h3>
<ul>
<li><button data-val="row">row</button></li>
<li><button data-val="row-reverse">row-reverse</button></li>
<li><button data-val="column">column</button></li>
<li><button data-val="column-reverse">column-reverse</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
$("button").on("click", function() {
let val = $(this).data("val");
$(".parent").css({"flex-direction": val});
$("#curVal").text(val);
});
});
</script>
</body>
</html>

4.2 justify-content

  • 作用:设置主轴上的子项目排列方式

  • 设置范围:父容器

  • 属性值

属性值说明
flex-start默认值,从头部开始,如果主轴为 x 轴,则从左到右
flex-end从尾部开始
center在主轴居中对齐,如果主轴为 x 轴,水平居中
space-around平分剩余空间
space-between先两边贴边,再平分剩余空间
  • 演示
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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>flex 布局</title>
<style>
* {margin: 0;padding: 0;} .parent {width: 600px;height: 330px;background: pink;display: flex;margin: 100px auto;}
.child {width: 100px;height: 100px;background: aliceblue;margin-bottom: 10px; margin-right: 10px;text-align: center;}
.option {width: 600px;height: 100px;margin: 0 auto;} .option ul {list-style: none;margin-top: 20px;}
.option ul li {margin-bottom: 10px;} .option button {width: 120px;height: 32px;}
</style>
</head>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3</span>
</div>
<div class="option">
<h3>justify-content:<span id="curVal">flex-start</span></h3>
<ul>
<li><button data-val="flex-start">flex-start</button></li>
<li><button data-val="flex-end">flex-end</button></li>
<li><button data-val="center">center</button></li>
<li><button data-val="space-around">space-around</button></li>
<li><button data-val="space-between">space-between</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
$("button").on("click", function() {
let val = $(this).data("val");
$(".parent").css({"justify-content": val});
$("#curVal").text(val);
});
});
</script>
</body>
</html>

4.3 flex-wrap

  • 作用:设置子项目是否换行

  • 设置范围:父容器

  • 属性值

属性值说明
nowrap默认值,不换行
wrap换行
  • 演示
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="zh">
<head>
<meta charset="UTF-8">
<title>flex 布局</title>
<style>
* {margin: 0;padding: 0;} .parent {width: 600px;height: 330px;background: pink;display: flex;margin: 100px auto;}
.child {width: 100px;height: 100px;background: aliceblue;margin-bottom: 10px; margin-right: 10px;text-align: center;}
.option {width: 600px;height: 100px;margin: 0 auto;} .option ul {list-style: none;margin-top: 20px;}
.option ul li {margin-bottom: 10px;} .option button {width: 120px;height: 32px;}
</style>
</head>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3</span>
<span class="child">4</span>
<span class="child">5</span>
<span class="child">6</span>
<span class="child">7</span>
</div>
<div class="option">
<h3>flex-wrap:<span id="curVal">nowrap</span></h3>
<ul>
<li><button data-val="nowrap">nowrap</button></li>
<li><button data-val="wrap">wrap</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
$("button").on("click", function() {
let val = $(this).data("val");
$(".parent").css({"flex-wrap": val});
$("#curVal").text(val);
});
});
</script>
</body>
</html>

4.4 align-items

  • 作用:设置侧轴上的子项目的排列方式(单行)

  • 设置范围:父容器

  • 属性值

属性值说明
stretch默认值,拉伸,当子项目高度为 auto 时生效
flex-start从上到下
flex-end从下到上
center挤在一起居中(垂直居中)
  • 演示
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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>flex 布局</title>
<style>
* {margin: 0;padding: 0;} .parent {width: 600px;height: 330px;background: pink;display: flex;margin: 100px auto;}
.child {width: 100px;height: 100px;background: aliceblue;margin-bottom: 10px; margin-right: 10px;text-align: center;}
.option {width: 600px;height: 100px;margin: 0 auto;} .option ul {list-style: none;margin-top: 20px;}
.option ul li {margin-bottom: 10px;} .option button {width: 120px;height: 32px;}
</style>
</head>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3</span>
</div>
<div class="option">
<h3>align-items:<span id="curVal">stretch</span></h3>
<ul>
<li><button data-val="stretch">stretch</button></li>
<li><button data-val="flex-start ">flex-start </button></li>
<li><button data-val="flex-end">flex-end</button></li>
<li><button data-val="center">center</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
$("button").on("click", function() {
let val = $(this).data("val");
$(".parent").css({"align-items": val});
$("#curVal").text(val);
});
});
</script>
</body>
</html>

4.5 align-content

  • 作用:设置侧轴上的子项目的排列方式(多行)

  • 设置范围:父容器

  • 属性值

属性值说明
stretch默认值,拉伸
flex-start默认值,从上到下
flex-end从下到上
center挤在一起居中(垂直居中)
space-around子项目在侧轴平分剩余空间
space-between子项目在侧轴先两边贴边,再平分剩余空间
  • 演示
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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>flex 布局</title>
<style>
* {margin: 0;padding: 0;} .parent {width: 600px;height: 330px;background: pink;display: flex;flex-wrap: wrap; margin: 100px auto;}
.child {width: 100px;height: 100px;background: aliceblue;margin-right: 10px;text-align: center;}
.option {width: 600px;height: 100px;margin: 0 auto;} .option ul {list-style: none;margin-top: 20px;}
.option ul li {margin-bottom: 10px;} .option button {width: 120px;height: 32px;}
</style>
</head>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3</span>
<span class="child">4</span>
<span class="child">5</span>
<span class="child">6</span>
<span class="child">7</span>
</div>
<div class="option">
<h3>align-content:<span id="curVal">stretch</span></h3>
<ul>
<li><button data-val="stretch">stretch</button></li>
<li><button data-val="flex-start ">flex-start </button></li>
<li><button data-val="flex-end">flex-end</button></li>
<li><button data-val="center">center</button></li>
<li><button data-val="space-around">space-around</button></li>
<li><button data-val="space-between">space-between</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
$("button").on("click", function() {
let val = $(this).data("val");
$(".parent").css({"align-content": val});
$("#curVal").text(val);
});
});
</script>
</body>
</html>

4.6 flex-flow

  • 作用:复合属性,相当于同时设置 flex-direction 和 flex-wrap。

  • 设置范围:父容器

4.7 flex

  • 作用:子项目占的份数

  • 设置范围:子项目

  • 属性值

属性值说明
none其计算值为 0 0 auto
1其计算值为 1 1 0%
auto其计算值为 1 1 auto
  • 演示
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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>flex 布局</title>
<style>
* {margin: 0;padding: 0;} .parent {width: 600px;height: 330px;background: pink;display: flex;flex-wrap: wrap; margin: 100px auto;}
.child {width: 100px;height: 100px;background: aliceblue;margin-right: 10px;text-align: center;}
.option {width: 600px;height: 100px;margin: 0 auto;} .option ul {list-style: none;margin-top: 20px;}
.option ul li {margin-bottom: 10px;} .option button {width: 120px;height: 32px;}
</style>
</head>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3 测试盒子</span>
</div>
<div class="option">
<h3>flex:<span id="curVal">none</span></h3>
<ul>
<li><button data-val="0 0 auto">none</button></li>
<li><button data-val="1 1 0%">1</button></li>
<li><button data-val="1 1 auto">auto</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
$("button").on("click", function() {
let val = $(this).data("val");
$(".child").eq(2).css({"flex": val});
$("#curVal").text(val);
});
});
</script>
</body>
</html>

4.8 align-self

  • 作用:控制子元素在侧轴的排列方式,可覆盖 align-items 属性

  • 设置范围:子项目

  • 属性值

属性值说明
auto默认值,以 父元素的'align-items' 为准
flex-start从上到下
flex-end从下到上
center挤在一起居中(垂直居中)
stretch拉伸,子项目高度为 auto 时生效
  • 演示
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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>flex 布局</title>
<style>
* {margin: 0;padding: 0;} .parent {width: 600px;height: 330px;background: pink;display: flex;flex-wrap: wrap; margin: 100px auto;}
.child {width: 100px;height: 100px;background: aliceblue;margin-right: 10px;text-align: center;}
.option {width: 600px;height: 100px;margin: 0 auto;} .option ul {list-style: none;margin-top: 20px;}
.option ul li {margin-bottom: 10px;} .option button {width: 120px;height: 32px;}
</style>
</head>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3 测试盒子</span>
</div>
<div class="option">
<h3>align-self:<span id="curVal">auto</span></h3>
<ul>
<li><button data-val="auto">auto</button></li>
<li><button data-val="flex-start">flex-start</button></li>
<li><button data-val="flex-end">flex-end</button></li>
<li><button data-val="center">center</button></li>
<li><button data-val="stretch">stretch</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
$("button").on("click", function() {
let val = $(this).data("val");
$(".child").eq(2).css({"align-self": val});
$("#curVal").text(val);
});
});
</script>
</body>
</html>

4.9 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
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>flex 布局</title>
<style>
* {margin: 0;padding: 0;} .parent {width: 600px;height: 330px;background: pink;display: flex;flex-wrap: wrap; margin: 100px auto;}
.child {width: 100px;height: 100px;background: aliceblue;margin-right: 10px;text-align: center;}
.option {width: 600px;height: 100px;margin: 0 auto;} .option ul {list-style: none;margin-top: 20px;}
.option ul li {margin-bottom: 10px;} .option button {width: 120px;height: 32px;}
</style>
</head>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3 测试盒子</span>
</div>
<div class="option">
<h3>order:<span id="curVal">0</span></h3>
<ul>
<li><button data-val="0">0</button></li>
<li><button data-val="-1">-1</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
$("button").on("click", function() {
let val = $(this).data("val");
$(".child").eq(2).css({"order": val});
$("#curVal").text(val);
});
});
</script>
</body>
</html>

五、参考资料

CSS参考手册