该篇文章为 freecodecamp Learn CSS Flexbox by Building a Photo Gallery 学习笔记

查看效果：flexbox-photo-gallery

Flexbox 可帮助您设计网页，使其在任何屏幕尺寸上都具有良好的外观

Flexbox 是一种一维 CSS 布局，可以控制容器内 items 的间隔和对齐方式。要使用它，需要为元素指定 display: flex; 这将使元素称为一个弹性的容器。Flex 容器的任何直接子项都称为 Flex items。

Flexbox 有 main axis（主轴） 和 cross axis（横轴）。main axis 由 flex-direction 属性定义，该属性有四个值：

  • row（默认）：水平轴，flex items 从左到右。
  • row-reverse：水平轴，flex items 从右到左。
  • column：垂直轴，flex items 从上到下。
  • column-reverse：垂直轴，flex items 从下到上。

注意：根据文本方向，轴和​​方向会有所不同。显示的值适用于从左到右的文本方向。

flex-wrap 属性决定容器太小时，flex items 是否换行。设置为wrap将允许 items 换行到下一行或下一列。nowrap(默认值)将防止 items 换行。

justify-content 属性决定 flex items 在 main axis（主轴） 上的对齐方式。

align-items 属性决定 flex items 在 cross axis（横轴） 上的对齐方式。

gap CSS 简写属性设置行和列之间的间隙，也称为间距。gap 属性 和 column-gap 和 row-gap 子属性为 flex，grid 和 multi-column 布局提供此功能。

box-sizing

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现：

  • content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

object-fit

指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框。

::after pseudo-element

1
2
3
4
.gallery::after {
  content: "";
  width: 350px;
}

::after 伪元素创建一个元素，该元素是所选元素的最后一个子元素，可以使用它在最后一个图像后添加一个空元素，如果为其执行与图像相同的宽度，则当 gallery 处于两列布局时，它会将最后一个图像推到左侧。现在它位于中心，因为在 flex 容器上设置了 justify-content: center;