跳转至

使用FlexBox进行页面布局

使用FlexBox进行页面布局

更新日期：2020-07-24

1. 概述

FlexBox是一种新的布局方法（其实早已经不新了）。 它能帮助我们轻松的解决Html的各种诸如对齐、居中、自适应大小等等的布局问题。所谓Flex就是伸缩、扩展的意思。 而目前，主流的浏览器都已经支持这种布局方式。

FlexBox非常适合用来创建响应式的页面布局。

2. 建立FlexBox容器

FlexBox使用一种称之为容器的东西来控制布局。容器可以定义各种各样的属性来控制容器内的元素按怎样的规则来布局。而且容器中又可以套容器。

可以通过display属性来将一个DIV元素定义为一个容器。

下面这个例子，演示了flex容器的默认效果：

默认效果

代码：

1
2
3
4
5
\\ CSS
.flex-container {
    display: flex;
    margin-bottom: 20px;
}

1
2
3
4
5
6
<!-- HTML -->
<div class="flex-container">
    <div style="color:red;">hello world!</div>
    <div style="color:green;">This is the first line.</div>
    <div style="color:blue;">This is the second line.</div>
</div>

运行效果：

hello world!
This is the first line.
This is the second line.

如同很多其它的布局方法一样，FlexBox使用可嵌套的水平布局和垂直布局来实现所有形式的布局要求。

3. 创建各种页面布局

为了能够在需要时候快速而方便的查询怎样进行布局，我这里直接举几个例子用代码来演示其用法。硬要记住这些东西会给我们施加不小的负担。

3.1. 水平和垂直布局

水平排列元素

flex默认就是使用水平布局。

代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
\\ CSS
.flex-container2 {
    display: flex;
    border: 1px solid;
    margin-bottom: 20px;
}
.flex-container2 > div {
    background-color: deepskyblue;
    color: white;
    min-width: 100px;
    height: 40px;
    margin: 0px 10px;
    font-size: 20px;
    text-align: center;
}

1
2
3
4
5
6
7
<!-- HTML -->
<div class="flex-container2">
    <div>0001</div>
    <div>0002</div>
    <div>0003</div>
    <div>0004</div>
</div>

运行效果：

0001
0002
0003
0004

垂直排列元素

通过flex-direction来指定排序的方向。垂直排列会使每个元素占满一行的所有空间。

代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
\\ CSS
.flex-container3 {
    display: flex;
    flex-direction: column;
    border: 1px solid;
    margin-bottom: 20px;
}
.flex-container3 > div {
    background-color: deepskyblue;
    color: white;
    min-width: 100px;
    height: 40px;
    margin: 10px 10px;
    font-size: 20px;
    text-align: center;
}

1
2
3
4
5
6
7
<!-- HTML -->
<div class="flex-container3">
    <div>0001</div>
    <div>0002</div>
    <div>0003</div>
    <div>0004</div>
</div>

运行效果：

0001
0002
0003
0004

自动排列大量元素

指定flex-wrap属性来使元素自动排列。 并且，可以使用flex-flow属性来同时指定排列方向和自动排列。这里我故意使元素的高度不一样。

代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
\\ CSS
.flex-container4 {
    display: flex;
    flex-flow: column wrap;
    border: 1px solid;
    margin-bottom: 20px;
    height: 200px;
}
.flex-container4 > div {
    background-color: deepskyblue;
    color: white;
    height: 40px;
    margin: 10px 10px;
    font-size: 20px;
    text-align: center;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!-- HTML -->
<div class="flex-container4">
    <div>0001</div>
    <div>0002</div>
    <div>0003</div>
    <div>0004</div>
    <div style="height:70px">0005</div>
    <div>0006</div>
    <div style="height:100px;">0007</div>
    <div>0008</div>
</div>

运行效果：

0001
0002
0003
0004
0005
0006
0007
0008

居中横向排列元素

可以使用justify-content来完成这个功能。不过这个属性能做的事情远不止这个。

代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
\\ CSS
.flex-container5 {
    display: flex;
    justify-content: center;
    border: 1px solid;
    margin-bottom: 20px;
}
.flex-container5 > div {
    background-color: deepskyblue;
    color: white;
    min-width: 100px;
    height: 40px;
    margin: 10px 10px;
    font-size: 20px;
    text-align: center;
}

1
2
3
4
5
6
7
<!-- HTML -->
<div class="flex-container5">
    <div>0001</div>
    <div>0002</div>
    <div>0003</div>
    <div>0004</div>
</div>

运行效果：

0001
0002
0003
0004

逆序排列元素

指定方向flex-direction时使用row-reverse或者column-reverse可以使元素方向倒转。

代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
\\ CSS
.flex-container6 {
    display: flex;
    flex-flow: row-reverse wrap;
    border: 1px solid;
    margin-bottom: 20px;
}
.flex-container6 > div {
    background-color: deepskyblue;
    color: white;
    min-width: 100px;
    height: 40px;
    margin: 10px 10px;
    font-size: 20px;
    text-align: center;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!-- HTML -->
<div class="flex-container6">
    <div>0001</div>
    <div>0002</div>
    <div>0003</div>
    <div>0004</div>
    <div>0005</div>
    <div>0006</div>
    <div>0007</div>
    <div>0008</div>
    <div>0009</div>
    <div>0010</div>
    <div>0011</div>
    <div>0012</div>
</div>

运行效果：

0001
0002
0003
0004
0005
0006
0007
0008
0009
0010
0011
0012

组合使用行和列

我们对整个画面进行规划时，常常会分成多个区域。每个区域的内容，又会分成各种行和列的组合。

代码：

 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
\\ CSS
.flex-container7 {
    display: flex;
    flex-flow: row nowrap;
    border: 1px solid;
    margin-bottom: 20px;
}
.flex-container7 > .left-ct {
    display: flex;
    flex-flow: row wrap;
    flex: 35%;
    align-content: flex-start;
}
.flex-container7 > .right-ct {
    display: flex;
    flex-flow: column wrap;
    flex: 65%;
}
.flex-container7 > .left-ct > div {
    background-color: deepskyblue;
    color: white;
    height: 40px;
    min-width: 60px;
    margin: 10px 10px;
    font-size: 20px;
    text-align: center;
}
.right-content > div {
    background-color: whitesmoke;
    color: black;
    height: 40px;
    margin: 0px 10px 10px 0px;
    font-size: 20px;
    text-align: left;
}

 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
<!-- HTML -->
<div class="flex-container7">
    <div class="left-ct">
        <div>0001</div>
        <div>0002</div>
        <div>0003</div>
        <div>0004</div>
        <div>0005</div>
        <div>0006</div>
        <div>0007</div>
        <div>0008</div>
        <div>0009</div>
        <div>0010</div>
        <div>0011</div>
        <div>0012</div>
        <div>0013</div>
    </div>
    <div class="right-ct">
        <div><b>这是右半部分的标题</b></div>
        <div class="right-content">
            <div>0009</div>
            <div>0010</div>
            <div>0011</div>
            <div>0012</div>
        </div>
    </div>
</div>

运行效果：

0001
0002
0003
0004
0005
0006
0007
0008
0009
0010
0011
0012
0013
这是右半部分的标题
0009
0010
0011
0012

3.2. 居中与对齐

自动分散对齐

现在我们给定一个宽度自动变化，限定最小高度的容器。然后试图让里面的元素分散对齐。 为了能看出效果，我调整了容器的最大宽度。

代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
\\ CSS
.flex-container8 {
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;

    border: 1px solid;
    margin-bottom: 20px;
    min-height: 600px;
    max-width:600px;
}
.flex-container8 > div {
    background-color: deepskyblue;
    color: white;
    min-width: 100px;
    height: 40px;
    margin: 10px 10px;
    font-size: 20px;
    text-align: center;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!-- HTML -->
<div class="flex-container8">
    <div>0001</div>
    <div>0002</div>
    <div>0003</div>
    <div>0004</div>
    <div>0005</div>
    <div>0006</div>
    <div>0007</div>
    <div>0008</div>
    <div>0009</div>
    <div>0010</div>
    <div>0011</div>
    <div>0012</div>
</div>

运行效果：

0001
0002
0003
0004
0005
0006
0007
0008
0009
0010
0011
0012

在页面右下端布局元素

这里嵌套使用了行布局，并且使用align-items来调整高度不同的元素使它们按照文字基线对齐。

代码：

 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
\\ CSS
.flex-container9 {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid;
    margin-bottom: 20px;
    align-items: baseline;
}
.flex-container9 > .left-ct {
    display: flex;
    flex: 60%;
}
.flex-container9 > .right-ct {
    display: flex;
    flex: 40%;
    flex-direction: row-reverse;
}
.flex-container9 > .left-ct > div {
    color: black;
    min-width: 100px;
    margin: 10px 10px;
    font-size: 40px;
    font-weight: 800;
    text-align: center;
}
.flex-container9 > .right-ct > div {
    color: black;
    min-width: 100px;
    margin: 10px 10px;
    font-size: 20px;
    text-align: center;
}

1
2
3
4
5
6
7
8
9
<!-- HTML -->
<div class="flex-container9">
    <div class="left-ct">
        <div>■ 这是文档的标题</div>
    </div>
    <div class="right-ct">
        <div>更新日期: 2020/6/7</div>
    </div>
</div>

运行效果：

■ 这是文档的标题
更新日期: 2020/6/7

绝对居中

这次我们让一个元素在容器中绝对居中。当然这个容器限定具有最小的宽和高。

代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
\\ CSS
.flex-container10 {
    display: flex;
    border: 1px solid;
    min-width: 400px;
    min-height: 400px;
    justify-content: center;
    align-items: center;
}
.flex-container10 > div {
    background-color: deepskyblue;
    color: white;
    min-width: 100px;
    max-width: 120px;
    height: 40px;
    margin: 10px 10px;
    font-size: 20px;
    text-align: center;
}

1
2
3
4
<!-- HTML -->
<div class="flex-container10">
    <div>我要居中</div>
</div>

运行效果：

我要居中