揭秘弹性布局：justify-content/align-content/align-items 的差异

2022-11-15 00:55:16

弹性布局的奥义：深入剖析 justify-content、align-content 和 align-items

什么是弹性布局？

弹性布局（Flexbox）是 CSS 中一种革命性的布局方式，它赋予开发者无与伦比的灵活性、适应性和响应性。通过巧妙地运用三个核心属性——justify-content、align-content 和 align-items，我们可以实现从简单到复杂的各种布局效果。

justify-content：主轴上的元素分布

想象一下你的布局是一个弹簧。justify-content 属性决定了弹簧上元素的分布方式。你可以将元素放置在弹簧的起点（flex-start）、终点（flex-end）、中间（center）或均匀分布（space-around、space-between）。

align-content：多行元素的分布

如果你的弹性布局有多行元素，align-content 属性将控制它们在垂直方向上的分布。你可以将元素对齐在容器顶部（flex-start）、底部（flex-end）、中间（center）或均匀分布（space-around、space-between）。

align-items：单行元素的分布

顾名思义，align-items 属性控制单行元素在垂直方向上的分布。你可以将元素对齐在容器顶部（flex-start）、底部（flex-end）、中间（center）、拉伸以填满容器高度（stretch）或沿着文本基线对齐（baseline）。

实际应用场景

居中对齐：
要将元素在水平和垂直方向上居中，可以使用 justify-content: center 和 align-items: center。

垂直均匀分布：
要垂直均匀分布元素，可以使用 align-content: space-around。

元素填满容器：
要使元素填满容器的高度或宽度，可以使用 align-items: stretch。

元素紧贴容器边缘：
要使元素紧贴容器的起始或结束边缘，可以使用 justify-content: flex-start 或 justify-content: flex-end。

代码示例：

/* 居中对齐 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 垂直均匀分布 */
.container {
  display: flex;
  flex-direction: column;
  align-content: space-around;
}

/* 元素填满容器 */
.container {
  display: flex;
  align-items: stretch;
}

/* 元素紧贴容器边缘 */
.container {
  display: flex;
  justify-content: flex-end;
}