CSS Academy · 课时

使用 align-self 覆盖弹性项目对齐方式

Q: 「使用 align-self 覆盖弹性项目对齐方式」这节课中我会学到什么？

使用 align-self 覆盖容器对单个弹性项目设置的 align-items。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 align-self 覆盖容器对单个弹性项目设置的 align-items。

使用 align-self 覆盖弹性项目对齐方式 是 CoddyKit 上的免费 CSS Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 align-self

align-self 会针对特定的弹性项目覆盖弹性容器的 align-items 设置。它作用于单个项目，而不是容器。

align-self 的值

它接受与 align-items 相同的值：

auto —— 继承容器的 align-items 值（默认值）
flex-start —— 对齐到交叉轴起点
flex-end —— 对齐到交叉轴终点
center —— 在交叉轴上居中
stretch —— 拉伸以填满交叉轴尺寸
baseline —— 对齐文本基线

实用示例

创建一个导航栏，其中大多数项目居中，但最后一个按钮对齐到末端：

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

拉伸单个项目

让一张卡片拉伸到完整高度，而其他卡片只占用自身所需的空间：

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

使用 margin: auto 进行对齐

弹性项目上的自动外边距会将项目本身（或同级项目）推向相反的一侧。这是使用 align-self 居中或分配空间的有力替代方案。

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

使用 margin: auto 垂直居中

自动外边距也适用于垂直方向。在列方向的弹性容器中使用 margin-top: auto，可以将元素推到底部：

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

基线对齐

按文本基线对齐项目，可以保持不同大小项目之间易于阅读的关系：

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto（默认值）

align-self: auto 会让项目使用容器的 align-items 值。只有当您希望偏离容器的默认设置时，才需要设置 align-self。

交叉轴与主轴

请记住：align-self 始终作用于交叉轴。如果 flex-direction: column，交叉轴就是水平方向，因此 align-self 控制左右位置。

组合使用 align-self 和 flex-grow

一种常见模式：让项目扩展以填满空间，同时覆盖其交叉轴对齐方式：

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

网格布局与弹性盒布局的对齐

CSS 网格布局同时提供 align-self（行轴）和 justify-self（列轴）来控制二维对齐。弹性盒布局的 align-self 只能控制交叉轴，请使用 margin: auto 控制主轴。

快速检查

某个弹性容器设置了 align-items: center。其中一个项目需要对齐到交叉轴顶部。应该在该项目上设置哪个属性？

回顾

align-self 会针对单个项目覆盖弹性容器的 align-items 设置。请使用它改变特定元素的对齐模式。margin: auto 是一个互补工具，可以分配剩余空间，将项目沿任一轴推向所需位置。

常见问题解答

「使用 align-self 覆盖弹性项目对齐方式」课时是免费的吗？

是的 — 「使用 align-self 覆盖弹性项目对齐方式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「使用 align-self 覆盖弹性项目对齐方式」这节课中我会学到什么？

使用 align-self 覆盖容器对单个弹性项目设置的 align-items。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「使用 align-self 覆盖弹性项目对齐方式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy