记录前端 flex 布局
chenzuoqing Lv3
  2020-07-11 17:09:57 2020-07-11 17:09   2023-10-29 15:07:20      

记录前端 flex 布局

弹性布局，任何一个容器都可以指定为 flex 布局。
当为父盒子设定为 flex 布局后，子元素的float、clear和vertical-align 属性将失效。

采用flex布局的元素，称为flex container（容器），它的所有子元素称为flex item（项目）

flex 布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

容器属性

容器属性是给父元素添加的属性，通常有下面几种：

  • flex-direction 设置主轴的方向
  • justify-content 设置主轴上子元素的排列方式
  • flex-wrap 设置子元素是否换行
  • align-content 设置侧轴上的子元素排列方式（多行）
  • align-items 设置侧轴上子元素的排列方式（单行）
  • flex-flow 复合属性，相当于同时设置了flex-direction和 flex-wrap

flex-direction

flex 有两个方向的概念，以默认方式介绍：

  • 水平方向（默认）：主轴、X轴、行，默认水平向右
  • 垂直方向（默认）：侧轴、Y轴、列，默认垂直向下
  • 但是主轴和侧轴会变换，就看 flex-direction 定义那个是主轴

而 flex-direction 是控制主轴方向的属性（控制了flex item的排列方向）。主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，子元素是根据主轴方向排列的。

flex-direction属性：

fex-direction 属性值 含义
row 从左到右，默认值
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

示例代码

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
<html>
<head></head>
<style>
    div {
        display: flex;
        /* flex-direction: row-reverse; */
        flex-direction: column;
        width: 800px;
        height: 500px;
        background-color: burlywood;
    }
    div span {
        width: 200px;
        height: 100px;
        background-color: cadetblue;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

justify-content

用于设置主轴上子元素的对齐方式，使用此属性前一定要确定好主轴

Justify-content 属性值 含义
flex-start 从头部开始（如果主轴是x轴，则从左到右），默认
flex-end 从尾部开始排列
center 在主轴居中对齐（若主轴是x轴，则水平居中）
space-around 平分剩余空间（每个子元素左右间隙一样，相当于左右margin一样）
space-between 先两边贴边，再平分剩余空间，元素间间隔一样（重要）
space-evenly 平分剩余空间到元素间的间隔，每个元素间的间隔相等，不贴边

示例

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
<html>
<head></head>
<style>
    div {
        display: flex;
        /* justify-content: space-between;*/
        /* justify-content: space-around; */
        justify-content: space-evenly;
        width: 800px;
        height: 500px;
        background-color: burlywood;
    }
    div span {
        width: 200px;
        height: 100px;
        background-color: cadetblue;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>

flex-wrap

flex 布局中，默认子元素是不换行的，flex item 都排在一条轴线上。如果子元素太多，flex 会压缩元素的大小（宽或高）让子元素继续挤在一行，但是可以用flex-wrap 控制是否换行。

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
<html>
<head></head>
<style>
    div {
        display: flex;
        flex-wrap: wrap;  /* 默认nowrap，不换行 */
        width: 800px;
        height: 500px;
        background-color: burlywood;
    }
    div span {
        width: 200px;
        height: 100px;
        background-color: cadetblue;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>

align-items

控制侧轴上（默认侧轴是y轴）子元素的排列方式（单行），在子项是单项的时候使用，注意确定侧轴。

Align-items 属性值 含义
flex-start 从上到下（如默认侧轴是y轴），默认值
flex-end 从下到上（如默认侧轴是y轴）
center 挤在一起居中（垂直居中）
stretch 拉伸子元素与父元素一样高（若子元素设置了高度会无效果）

示例，实现水平垂直居中，分别控制主轴和侧轴居中

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
<html>
<head></head>
<style>
    div {
        display: flex;
        justify-content: center;
        align-items: center;
        /* align-items: stretch; */
        width: 800px;
        height: 500px;
        background-color: burlywood;
    }
    div span {
        width: 200px;
        height: 100px;
        background-color: cadetblue;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

align-content

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），子项单行是没效果的。

align-content 属性值 含义
flex-start 在侧轴的头部开始排列，默认
flex-end 在侧轴的尾部开始排列
center 在侧轴的中间显示
space-around 子项在侧轴平分剩余空间（相当于两个子项有相同的margin值）
space-between 子项在侧轴先分布在两头（贴边），再平分剩余空间
stretch 设置子项元素高度平分父元素高度

与 align-items 的区别：

  • align-items 适用于单行情况，只有上对齐、下对齐、居中和拉伸几种方式
  • align-content 适用于子项多行（换行）的情况，单行无效，属性值较多，如上
  • 所以单行用 align-items，多行用 align-content，同时注意确定侧轴

示例，可以实现多行子项的各种对齐排列

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
<html>
<head></head>
<style>
    div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* align-content: space-between;  /* 一行贴上沿，一行贴着下沿 */
        /* align-content: stretch;  /* 一行贴上沿，一行贴着下沿 */ 
        align-content: center;  /* 水平、垂直居中 */
        width: 800px;
        height: 500px;
        background-color: burlywood;
    }
    div span {
        width: 250px;
        height: 100px;
        background-color: cadetblue;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性，如下写法：

1
2
3
4
5
6
7
8
9
div {
	flex-direction: row;
	flex-wrap: wrap;
}

/* 与下面等效 */
div {
	flex-flow: row wrap;
}

子项属性

  • flex 子项占的份数

  • align-self 控制自己在侧轴上的排列方式

  • order 属性定义子项的排列顺序（前后顺序）

flex 属性

flex 属性定义子项目分配剩余空间，用 flex 来表示占多少份数，默认值是 0

1
2
3
.item {
	flex: <number>;
}

典型场景：一行中三个元素，最左侧元素固定、最右侧元素固定，中间元素占的宽度自适应（圣杯布局）。

还可以类似 bootstrap 中的 col，给元素平均、指定分配占比，并且拉伸自适应。

示例：

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
<html>
<head></head>
<style>
    section {
        display: flex;
        background-color: burlywood;
    }
    section div:nth-child(1) { /* 表示第一个子项 */
        width: 100px;
        height: 100px;
        background-color: cadetblue;
    }
    section div:nth-child(2) { /* 表示第二个子项 */
        flex: 1;  /* 占用所有剩余空间 */
        height: 100px;
        background-color: grey;
    }
    section div:nth-child(3) { /* 表示第三个子项 */
        width: 100px;
        height: 100px;
        background-color: cadetblue;
    }
    p {
        margin: 40px;
        display: flex;
        background-color: burlywood;
    }
    p span {
        flex: 1;   /* 三个子项宽度平均分配 */
        border: 1px dashed;
        height: 100px;
    }
    #demo1 {
        margin: 40px;
        display: flex;
        background-color: burlywood;
    }
    #demo1 span {
        flex: 1;   /* 三个子项宽度平均分配 */
        border: 1px dashed;
        height: 100px;
    }
    #demo1 span:nth-child(2) {
        flex: 2;  /* 第二个元素占2份，其他两个格子各占1份 */
    }

</style>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>

    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>

    <div id="demo1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>
</html>

align-self

控制子项自己在侧轴上的排列方式，可以允许单个子项与其他子项有不一样的对齐方式，可以覆盖父元素 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性。如果没有父元素，等同于 stretch。

示例：

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>
<head></head>
<style>
    p {
        margin: 40px;
        height: 400px;
        display: flex;
        align-items: center;
        background-color: burlywood;
    }
    p span {
        flex: 1;   /* 三个子项宽度平均分配 */
        border: 1px dashed;
        height: 100px;
    }
    p span:nth-child(2) {  /* 让第二个子项向侧轴的底部对齐 */
        align-self: flex-end;
    }
</style>
<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
</html>

order

定义子项的排列顺序，数值越小，排列越靠前，默认为 0。

示例：让原本1、2、3排列的三个子项变成2、1、3排列。

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>
<head></head>
<style>
    p {
        margin: 40px;
        height: 400px;
        display: flex;
        align-items: center;
        background-color: burlywood;
    }
    p span {
        flex: 1;
        border: 1px dashed;
        height: 100px;
    }
    p span:nth-child(2) {
        order: -1; /* 让第二个子项排前面，顺序变成2 1 3，不设默认是1 2 3排列的 */
    }
</style>
<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
</html>
记录前端 flex 布局
2020/07/11/记录前端-flex-布局/
Author
chenzuoqing
Published
2020-07-11 17:09
License
 Comments
  1. 记录前端 flex 布局
    1. 容器属性
      1. flex-direction
      2. justify-content
      3. flex-wrap
      4. align-items
      5. align-content
      6. flex-flow
    2. 子项属性
      1. flex 属性
      2. align-self
      3. order