CSS 布局神器 —— Flexbox-JXin的博客

温馨提示

该文章距离上次更新已经过去了 638 天，文章内容可能已经过时。

什么是Flexbox？
如何让一个元素变成Flex容器
Flex 属性详解

什么是Flexbox？

Flexbox，全称Flexible Box Layout，是CSS3引入的一种布局模式。它的核心思想就是“灵活”，允许我们更简单地管理容器中的子元素排列、对齐和分配空间。

如何让一个元素变成Flex容器

要让一个元素成为Flex容器，只需在其CSS样式中设置display: flex。这将使该元素的所有直接子元素（即Flex项目）自动按照Flexbox的规则进行排列和对齐。

.container {
	display: flex; /* 或 display: inline-flex */
}

1
2
3

一个简单的例子：

实现项目的水平垂直居中

<!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>
      .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 600px;
        height: 600px;
        border: 1px solid;
        margin: 0 auto;
      }
      .wrap .box {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box"></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

css flex布局

上面的代码就可以轻松实现了项目的水平和垂直居中。

Flex 属性详解

flex-direction

指定Flex容器内项目的主轴方向。

row（默认值）：项目按水平方向从左到右排列。
row-reverse：项目按水平方向从右到左排列。
column：项目按垂直方向从上到下排列。
column-reverse：项目按垂直方向从下到上排列。

flex-direction

justify-content

定义项目在主轴（水平轴）上的对齐方式

flex-start（默认值）：项目从容器的起点对齐。
flex-end：项目从容器的终点对齐。
center：项目在容器中居中对齐。
space-between：项目之间的间隔相等，第一个项目和最后一个项目紧靠容器边缘。
space-around：项目之间的间隔相等，每个项目两侧间隔为容器宽度的均分。
space-evenly：项目之间的间隔相等，包括第一个项目和最后一个项目。

justify-content

align-item

定义项目在交叉轴（垂直轴）上的对齐方式。

交叉轴

交叉轴是主轴的垂直轴线

stretch（默认值）：项目被拉伸以适应容器（项目没有设置高度）。
flex-start：项目在交叉轴的起点对齐。
flex-end：项目在交叉轴的终点对齐。
center：项目在交叉轴中居中对齐。
baseline：项目的第一行文字基线对齐。

align-item

align-content

定义多行内容在交叉轴上的对齐方式。

align-content属性主要用于多行的Flex容器，当Flex容器中的项目数量足够多，以至于需要换行时（通过设置flex-wrap: wrap），align-content才能起作用。

stretch（默认值）：各行被拉伸以适应容器。
flex-start：各行从容器的起点对齐。
flex-end：各行从容器的终点对齐。
center：各行在容器中居中对齐。
space-between：各行之间的间隔相等。
space-around：各行之间的间隔相等，每行两侧间隔相等。
space-evenly：各行之间的间隔相等，每行两侧间隔相等，包括第一行和最后一行。

align-content

flex-wrap

flex-wrap 属性定义了 Flex 容器是否允许项目换行，以及换行的方向。

nowrap（默认值）：所有项目放在一行中，Flex 容器的宽度不够容纳所有的项目，项目的宽度会被压缩，以适应容器的宽度。
wrap：项目换行，第一行在上方。
wrap-reverse：项目换行，第一行在下方。

flex-wrap

nowrap下且Flex容器宽度不够时如何让项目不被压缩？

可以给所有项目加上 flex-shrink: 0; 确保项目保持其原有宽度

flex-shrink

设置了Flex容器高度，wrap换行换到中间？

flex换行

这是由于 align-content 属性的默认值 stretch 造成的，可以将align-content设置为flex-start

align-content: flex-start;

order

定义项目的排列顺序。数值越小，排列越靠前。默认值是0，可以输入负值。

<div class="wrap wrap1">
	<div class="box" style="order: 10">1</div>
	<div class="box" style="order: 9">2</div>
	<div class="box" style="order: 2">3</div>
	<div class="box">4</div>
	<div class="box" style="order: -1">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>

1
2
3
4
5
6
7
8
9
10
11
12

flex order

flex-grow

定义项目的放大比例。默认值为0，即项目不会放大。

例如：

<!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>
      .wrap {
        width: 800px;
        display: flex;
      }
      .box {
        background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid;
      }
      .box1 {
        width: 200px;
      }
      .box2 {
        flex-grow: 3;
      }
      .box3 {
        flex-grow: 2;
      }
      .box4 {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box box1">1</div>
      <div class="box box2">2</div>
      <div class="box box3">3</div>
      <div class="box box4">4</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

flex-grow

flex-grow 的比例宽度计算是基于所有 flex-grow 值的总和来分配剩余空间的。计算步骤为：

Flex容器总宽度为800px，box1宽度为200px，剩余600px
flex-grow总的值为6（box2+box3+box4）
每一个flex-grow占100px（600px / 6）

flex-shrink

定义项目的缩小比例。默认值为1，即项目将根据需要缩小。

flex-shrink 属性定义了项目在容器空间不足（即所有项目的总宽度或高度超过容器的宽度或高度）时的收缩比例。

例如：

<!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>
      .wrap {
        width: 600px;
        display: flex;
      }
      .box {
        background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid;
        width: 300px;
      }
      .box1 {
        flex-shrink: 1;
      }
      .box2 {
        flex-shrink: 2;
      }
      .box3 {
        flex-shrink: 3;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box box1">1</div>
      <div class="box box2">2</div>
      <div class="box box3">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

flex-shrink

flex-shrink 的比例宽度计算是基于需要被压缩的宽度以及所有flex-shrink值总和来计算的，计算步骤为：

Flex容器宽度为600px，每一个box的宽度为300px，所以需要被压缩的宽度为：3 * 300px - 600px = 300px
flex-shrink总的值为6（box1+box2+box3）
所以每一个flex-shrink占：300px / 6 = 50px
box1的宽度为：300px - 1 * 50px = 250px
box2的宽度为：300px - 2 * 50px = 200px
box3的宽度为：300px - 3 * 50px = 150px

flex-basis

flex-basis 属性定义了在分配多余空间之前，项目的初始主尺寸（即主轴方向的尺寸）。它可以取代项目的宽度或高度（具体取决于主轴是水平还是垂直）。默认值为 auto。这个属性的作用是为项目设置一个基础尺寸，之后再通过 flex-grow 和 flex-shrink 来调整项目的最终尺寸。可以是具体的长度值（如20%，100px）或auto。

auto：默认值。项目的主尺寸由其内容决定或由其他相关属性（如 width 或 height）决定。
length：具体的尺寸值（如 10px，5em），表示项目的初始主尺寸。
percentage：百分比值，表示相对于容器的主尺寸的百分比。

例如：

<!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>
      .container {
        display: flex;
        border: 1px solid;
        width: 600px; /* 固定容器宽度 */
        margin: 0 auto;
        height: 200px; /* 固定容器高度 */
      }
      .box {
        height: 100px;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid rebeccapurple;
      }
      .box1 {
        flex-basis: auto;
        background-color: lightcoral;
      }
      .box2 {
        flex-basis: 150px;
        background-color: lightgreen;
      }
      .box3 {
        flex-basis: 30%;
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1">auto</div>
      <div class="box box2">150px</div>
      <div class="box box3">30%</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

flex-basis

flex-basis 与 width 和 height 的区别

flex-basis 设定的是项目的初始尺寸，它可以被 flex-grow 和 flex-shrink 属性进一步调整。
width 和 height 设定的是项目的固定尺寸，不会受 flex-grow 和 flex-shrink 的影响。

flex

flex-grow，flex-shrink和flex-basis的简写。

none：等同于 0 0 auto。
auto：等同于 1 1 auto。

例如：

<!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>
      .container {
        display: flex;
        border: 1px solid;
        width: 600px; /* 固定容器宽度 */
        margin: 0 auto;
        height: 200px; /* 固定容器高度 */
      }
      .box {
        height: 100px;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid rebeccapurple;
      }
      .box1 {
        flex: none;
        background-color: lightcoral;
      }
      .box2 {
        flex: 1 1 auto;
        background-color: lightgreen;
      }
      .box3 {
        flex: 2 1 150px;
        background-color: lightblue;
      }
      .box4 {
        flex: 1 2 100px;
        background-color: lightgoldenrodyellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1">none</div>
      <div class="box box2">1 1 auto</div>
      <div class="box box3">2 1 150px</div>
      <div class="box box4">1 2 100px</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

由于Flex容器下的项目总宽度没有超过容器，所以第二个参数flex-shrink是不起作用的，这个例子就相当于是flex-grow和flex-basis的结合计算步骤：

Flex容器的总宽度为600px，box1和box2的初始宽度都是由内容决定的，假设box1初始宽度为40px，box2初始宽度为60px，所以容器剩余的宽度为600px - 40px - 60px - 150px - 100px = 250px
flex-grow，也就是flex的第一个参数的总的值为4（box2+box3+box4）
所以每一个flex-grow占：250px / 4 = 62.5px
box1的宽度就为40px
box2的宽度就为60px + 62.5px = 122.5px
box3的宽度就为150px + 62.5px * 2 = 275px
box3的宽度就为100px + 62.5px = 162.5px

align-self

align-self 属性允许单个弹性项目调整其在交叉轴（垂直于主轴）的对齐方式。它可以覆盖容器的 align-items 属性，对单个项目生效。

auto（默认值）：继承容器的 align-items 属性值。如果父元素没有设置 align-items，则为 stretch。
flex-start：将项目对齐到交叉轴的起始位置。
flex-end：将项目对齐到交叉轴的结束位置。
center：将项目在交叉轴上居中对齐。
baseline：将项目的基线对齐。
stretch：如果项目未设置高度或设为 auto，则将项目拉伸以填满容器（适用宽度或高度取决于交叉轴方向）。

例如：

<!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>
      .container {
        display: flex;
        height: 200px; /* 固定容器高度 */
        border: 1px solid;
        width: 600px; /* 固定容器宽度 */
        margin: 0 auto;
        align-items: center; /* 默认所有项目居中对齐 */
      }
      .box {
        width: 100px;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid rebeccapurple;
        height: auto; /* 默认高度 */
      }
      .box1 {
        align-self: flex-start;
        background-color: lightcoral;
      }
      .box2 {
        align-self: flex-end;
        background-color: lightgreen;
      }
      .box3 {
        align-self: center;
        background-color: lightblue;
      }
      .box4 {
        align-self: baseline;
        background-color: lightgoldenrodyellow;
      }
      .box5 {
        align-self: stretch;
        background-color: lightpink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1">flex-start</div>
      <div class="box box2">flex-end</div>
      <div class="box box3">center</div>
      <div class="box box4">baseline</div>
      <div class="box box5">stretch</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

align-self