align-content 和 align-items 的区别

在 CSS 中，align-content 和 align-items 是用于控制 flex 容器中子元素在纵向方向上的对齐方式的两个重要属性。虽然它们有一些相似之处，但是它们之间也有一些明显的区别。

align-content

align-content 用于控制多根轴线在弹性容器内的对齐方式。也就是说，当一行排不下时，可以通过这个属性来控制每行子元素之间的对齐方式。具体的对齐方式包括:

• flex-start：将多行子元素的顶部对齐。
• flex-end：将多行子元素的底部对齐。
• center：将多行子元素的纵向中心对齐。
• space-between：将多行子元素平均分布，但首行和尾行不与容器边缘对齐。
• space-around：将多行子元素平均分布，并保持首行和尾行与容器边缘的距离相等。
• stretch：通过拉伸子元素，使其填充整个容器。

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

在上面的例子中，当容器中的子元素排列不下时，它们就会在纵向中心对齐。

align-items

align-items 用于控制弹性容器中所有子元素的在纵向方向上的对齐方式。具体的对齐方式包括：

• flex-start：将子元素顶部对齐。
• flex-end：将子元素底部对齐。
• center：将子元素纵向中心对齐。
• baseline：将子元素根据他们的基线对齐。
• stretch (默认值)：通过拉伸子元素，使其填充整个容器。

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

在上面的例子中，容器内的子元素都会在纵向中心对齐。

区别

align-content 和 align-items 最明显的区别在于它们所控制的元素不同。align-items 只对单条轴线上的元素进行对齐，而 align-content 则是针对多条轴线上的元素进行对齐。也就是说，align-items 更多影响单条轴线上的排列，而 align-content 则更多影响整个容器内的排列。

此外，align-items 是针对单个元素的对齐方式，而 align-content 更多考虑的是多个元素之间的对齐方式，因此后者对排列中的间隔和间距更加敏感。

结论

总之，align-content 和 align-items 都是非常重要的属性，用于控制 flex 容器内子元素在纵向方向上的排列方式。它们各自有一些独特的特点，可以根据不同的需求选择使用。