先决条件

  • 熟悉html，css的基本语法
  • 高中英语水平
  • 准备一些不同大小的照片
  • 好奇心和探索精神
    其实，这是个笔记。这个笔记来源于以下课程：freecodecamp

什么是css弹性盒子FlexBox

通俗的讲起来，FlexBox就是一种让元素自动布局的方法。在不同的设备/网页大小下，你的元素能够根据你自己的设置自动调节布局。具体的我们在代码中讲解。

开始使用弹性盒子

先从最初的一段代码开始：

1
2
3
.e1 {
 display: flex;
}

e1是你创建的类，display: flex;表示使用弹性盒子。

光看不练没什么效果，现在请先创建一个基础的html网页，添加div元素，在其中加上多个img元素，放上你自己准备好的照片。

主轴和交叉轴

Flexbox中的主轴决定了元素的排列方向。有4个值，看看下面的4段不同的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.e1{
 display: flex;
 flex-direction: row;
}
.e1{
 display: flex;
 flex-direction: row-reverse;
}
.e1{
 display: flex;
 flex-direction: column;
}
.e1{
 display: flex;
 flex-direction: column-reverse;
}

利用你的英语想一想，应该很快就能明白了。row/column表示横着排和竖着排，-reverse表示反转排列方向。为了让你的照片不要溢出屏幕，你可以用竖着排的方式。不过这样一行只有一张，所以我们先选择横着排，然后用下面的方式换行：

1
2
3
4
5
.e1{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

默认值是nowarp，这里设置为wrap表示允许换行。尝试改变你的浏览器大小，可以看到照片随着你的网页大小换行了。

那么什么是交叉轴呢？交叉轴是垂直与主轴的轴，知道这一点就够了。

对齐

你的容器现在默认左对齐。用下列代码可以修改为居中：

1
2
3
4
5
6
.e1{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
}

justify-content控制整个Flexbox容器的主轴对齐方式，这里表示居中。此外，要保证每一项在交叉轴居中，你需要利用align-items:

1
2
3
4
5
6
7
.e1{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
}

所以这两个到底有什么区别？？？为了更好理解，有一个网页可以自己尝试更改。MDN Web Docs

1个元素可能无法很好地观察到区别，因此试试把下面代码里地这两个属性改成center：

1
2
3
4
5
6
7
8
9
10
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: normal;
  height: 600px;
}
.box div {
  width: 100px;
  height: 100px;
  background-color: red;
  margin:10px;
}

调节图像

利用以下代码，可以保持图像纵横比，来自动调节到适合的大小（会裁剪）

1
2
3
.e1 img {
 object-fit: cover;
}

这里指定了所有e1类的img元素，将其调节到合适的大小。

给图片添加间距？用gap属性：

1
2
3
.e1{
 gap: 10px;
}

伪元素

如果最后一行缺少图片，那么最后一张图会自动居中。为此，添加一个虚拟的元素是必要的。

1
2
3
4
.e1::after {
 content: "";
 width: 100px;
}

你可以自行调节，来让最后一行多出一个元素。目前它不会显示任何内容，你可以用css指定它的颜色等属性。

小测试

  • 什么是Flexbox？如何使用它？
  • 主轴、交叉轴分别是什么？如何设定它们？
  • 如何设置自动换行？
  • 如何设置居中？2种居中方式的区别是？
  • 如何添加伪元素？有什么用？