CSS Academy · 课时

Justify-Content 与 Align-Items

Q: 「Justify-Content 与 Align-Items」这节课中我会学到什么？

使用 justify-content 和 align-items 沿主轴与交叉轴分配项目。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 justify-content 和 align-items 沿主轴与交叉轴分配项目。

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

两个关键对齐属性

最常用的两个弹性对齐属性是：

justify-content —— 沿主轴对齐项目
align-items —— 沿交叉轴对齐项目

justify-content: flex-start

flex-start（默认）会将项目聚集到主轴起点。在 row 方向下，项目会与左侧对齐。

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

justify-content: center

沿主轴将项目居中。这是使用弹性盒布局实现水平居中的经典方法。

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

将项目聚集到主轴终点（在 row 方向下为右侧）。

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

在项目之间分配相等的空间。第一个项目位于起点，最后一个项目位于终点，两端没有额外空间。

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

在每个项目周围分配相等的空间。边缘项目获得的空间是内部间距的一半。从视觉上看，两端的内边距是项目之间间距的一半。

justify-content: space-evenly

所有间距（包括两端）都相等。与 space-around 不同，两端的内边距与项目之间的间距相等。

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch（默认）

stretch（默认）会让交叉轴上的所有弹性项目填满容器的交叉轴尺寸。在行容器中，所有项目的高度都会相同。

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

沿交叉轴将项目居中。在行容器中，这会让项目垂直居中。这是实现垂直居中的经典方案。

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start 和 flex-end

flex-start 会将项目与交叉轴起始边缘对齐（在行布局中为顶部）。flex-end 会将项目与交叉轴末端边缘对齐（在行布局中为底部）。

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

对齐项目，使它们的文本基线对齐。当项目的字体大小不同时，如果希望它们在视觉上保持对齐，这一属性非常有用。

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

快速检查

哪种组合可以让弹性项目在容器内同时水平和垂直完美居中？

回顾

justify-content 使用 flex-start、center、space-between 等值沿主轴分配项目。align-items 使用 stretch、center、flex-start 等值在交叉轴上定位项目。两者结合可以控制两个轴上的对齐方式。

常见问题解答

「Justify-Content 与 Align-Items」课时是免费的吗？

是的 — 「Justify-Content 与 Align-Items」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Justify-Content 与 Align-Items」这节课中我会学到什么？

使用 justify-content 和 align-items 沿主轴与交叉轴分配项目。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

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

「Justify-Content 与 Align-Items」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 CSS Academy