一、前言

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参考手册