肉渣教程

Flexbox 容器

上一节 下一节

父元素（容器）

如上例所示，将某个元素设置成flex布局的外部容器的方法就是将其display属性设置成flex即可：

.flex-container {
  display: flex;
}

flex容器相关的属性如下：

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction属性

flex-direction属性可定义flex容器堆叠flex项的方向，其取值范围：

  • column - 竖向，从上向下
  • column-reverse - 竖向，从下往上
  • row - 横向，从左到右
  • row-reverse - 横向，从右到左


案例1：column - 竖向，从上向下

1
2
3
.flex-container {
  display: flex;
  flex-direction: column;
}

运行一下


案例2：column-reverse - 竖向，从下向上

1
2
3
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

运行一下


案例3：row - 横向，从左到右

1
2
3
.flex-container {
  display: flex;
  flex-direction: row;
}

运行一下


案例4：row-reverse - 横向，从右到左

1
2
3
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

运行一下

flex-wrap属性

flex-wrap属性决定flex项是否会自动断行。其取值范围：

  • wrap - 会自动断行，需断则断
  • nowrap - 永不断行（默认）
  • wrap-reverse - 会自动断行，需断则断，不过是向反方向新起一行，


案例1 warp - 会自动断行，需断则断

1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

运行一下


案例2 nowarp - 永不断行

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

运行一下


案例3 warp-reverse - 会自动断行，向反方向新起一行

1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

运行一下

flex-flow属性

洒家是一个文盲，洒家是一个懒蛋，于是洒家用flex-flow属性通吃了flex-direction和flex-wrap这两种属性。如下所示：

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

运行一下

justify-content属性

justify-content属性定义flex项的对齐方式（一般来说特指在每一行上的对齐方式），其取值范围：

  • center - 居中
  • flex-start - 对齐flex起始方向
  • flex-end - 对齐flex结束方向
  • space-around - 保证flex项外间距一致，尽可能两端对齐
  • space-between - 保证flex项之间的距离一致，尽可能两端对齐


案例1 center - 居中

1
2
3
4
5
6
7
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

运行一下


案例2 flex-start - 对齐flex起始方向

1
2
3
4
5
6
7
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

运行一下


案例3 flex-end - 对齐flex结束方向

1
2
3
4
5
6
7
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

运行一下


案例4 space-around - 保证flex项外间距一致，尽可能两端对齐

1
2
3
4
5
6
7
.flex-container {
  display: flex;
  height: 200px;
  align-items: space-around;
}

运行一下


案例5 space-between - 保证flex项之间的距离一致，尽可能两端对齐

1
2
3
4
5
6
7
.flex-container {
  display: flex;
  height: 200px;
  align-items: space-between;
}

运行一下

align-items属性

align-items属性可以用来定义flex项在垂直方向的对齐方式。其取值范围：

  • center - 垂直方向上居中
  • flex-start - 对齐起始方向（一般来说是向上边对齐）
  • flex-end - 对齐结束方向（一般来说是向下边对齐）
  • stretch - 垂直方向上拉伸至满格
  • baseline - 只保持flex项的内容基线在同一条水平线上就ok啦


案例1：center - 垂直方向上居中

1
2
3
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

运行一下


案例2：flex-start - 对齐起始方向

1
2
3
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

运行一下


案例3：flex-end - 对齐结束方向

1
2
3
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

运行一下


案例4：stretch - 拉伸至满格

1
2
3
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

运行一下


案例5：baseline - 内容基线一致

1

2

3
.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

运行一下

align-content属性

align-content属性定义的是flex行的对齐方式，一般情况下，指的是行在垂直方向上的对齐方式。其取值范围是：

  • center - 居中
  • stretch - 拉升至整体满格
  • space-around - 保证flex行外间距一致，尽可能两端对齐
  • space-between - 保证flex行之间的距离一致，尽可能两端对齐
  • flex-start - 对齐flex起始方向
  • flex-end - 对齐flex结束方向


案例1：center - 居中

1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

运行一下


案例2：stretch - 整体拉升至满格

1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

运行一下


案例3：space-around - 保证flex行外间距一致，尽可能两端对齐

1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

运行一下


案例4：space-between - 保证flex行之间的距离一致，尽可能两端对齐

1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

运行一下


案例5：flex-start - 对齐flex起始方向

1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

运行一下


案例6：flex-end - 对齐flex结束方向

1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

运行一下

完美居中

保持一个flex项目完美居中（就是垂直方向、水平方向都居中）的最佳实践方式如下所示：

反清
复明
.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

运行一下

介绍完了flex容器的相关属性后，接下去要来深入介绍flex项的相关属性。

Flexbox 容器

上一节 下一节