CSS 对齐

对齐是 CSS 布局中的一个核心概念。随着 Flexbox 和 Grid 的出现，CSS 提供了一套强大而一致的属性来控制元素在容器内的对齐方式。本章将总结这些关键的对齐属性。

对齐可以分为两个维度：

1. 内容分布 (Content Distribution): 控制一组项目在其容器内的整体对齐和间距。
2. 自身对齐 (Self Alignment): 控制单个项目在其布局容器（或单元格）内的对齐。

内容分布 (沿主轴)

justify-content 属性用于控制项目在主轴（通常是水平方向）上的对齐和分布。

• flex-start: (默认) 向主轴起点对齐。
• flex-end: 向主轴终点对齐。
• center: 居中对齐。
• space-between: 两端对齐，项目之间的间隔都相等。
• space-around: 每个项目两侧的间隔相等。
• space-evenly: 每个项目之间的间隔以及项目与边框之间的间隔都完全相等。

.container {
  display: flex;
  justify-content: space-between;
}

内容分布 (沿交叉轴)

align-content 属性用于控制项目在交叉轴（通常是垂直方向）上的对齐和分布。此属性仅在有多行/多列项目时（即 flex-wrap: wrap）才生效。

• flex-start: 向交叉轴起点对齐。
• flex-end: 向交叉轴终点对齐。
• center: 居中对齐。
• space-between: 两端对齐。
• space-around: 每行/列两侧的间隔相等。
• space-evenly: 每行/列之间的间隔以及与边框的间隔都相等。
• stretch: (默认) 拉伸项目以填满容器。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: center;
}

自身对齐 (沿交叉轴)

align-items 属性用于控制项目在交叉轴上的对齐方式。这是最常用的对齐属性之一。

• stretch: (默认) 如果项目未设置高度/宽度，将占满整个容器的高度/宽度。
• flex-start: 向交叉轴起点对齐。
• flex-end: 向交叉轴终点对齐。
• center: 居中对齐。
• baseline: 项目的第一行文字的基线对齐。

.container {
  display: flex;
  height: 200px;
  align-items: center; /* 垂直居中所有项目 */
}

单个项目对齐

align-self 属性用于单个弹性项目上，可以覆盖容器上设置的 align-items。

.container {
  display: flex;
  align-items: flex-start;
}

.special-item {
  align-self: center; /* 只有这个项目是居中的 */
}

Grid 布局中的对齐

Grid 布局使用相同的对齐属性，但名称略有不同，以反映其二维特性：

• justify-content: 网格在容器内的水平对齐。
• align-content: 网格在容器内的垂直对齐。
• justify-items: 项目在其单元格内的水平对齐。
• align-items: 项目在其单元格内的垂直对齐。
• justify-self 和 align-self 用于单个网格项目。

place- 简写属性:

• place-content: align-content 和 justify-content 的简写。
• place-items: align-items 和 justify-items 的简写。

.grid-container {
  display: grid;
  place-items: center; /* 水平和垂直都居中 */
}

掌握这些对齐属性是精通现代 CSS 布局的关键。