0Pricing
CSS Academy · 课时

Display、Flex 与 Flex Direction

在容器上启用 Flexbox，并使用 flex-direction 控制主轴方向。

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

启用弹性盒布局

在容器元素（即弹性容器）上设置 display: flex，即可启用弹性盒布局。它的直接子元素会自动成为弹性项目。

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

内联弹性盒

display: inline-flex 会创建一个以内联方式流动的弹性容器（类似于 inline-block），而不是块级容器。其内部的弹性盒行为完全相同。

<p>Status: <span class="badge">🔥 Trending</span></p>

主轴和交叉轴

弹性盒布局有两个轴：

  • 主轴：项目排列的主要方向
  • 交叉轴：垂直于主轴的方向

所有弹性属性都相对于这两个轴，而不是固定的方向。

flex-direction: row（默认）

默认方向是 row：项目沿水平主轴从左到右排列。

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

flex-direction: column

flex-direction: column 会让项目垂直堆叠。主轴变为垂直方向，交叉轴变为水平方向。

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse 会反转水平方向：项目从右到左排列。主轴起点位于右侧。

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

flex-direction: column-reverse

column-reverse 会让项目从下到上堆叠。最后一个项目会显示在顶部。

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction 会影响所有弹性属性

更改 flex-direction 时，justify-content 的方向也会随之改变。如果方向是 column，justify-content 会沿垂直轴而不是水平轴对齐项目。

简单的水平布局

弹性盒布局最简单的使用场景——让导航栏中的项目居中：

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

简单的垂直布局

让卡片内容垂直和水平居中：

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

flex-flow 简写属性

flex-flow 是 flex-direction 和 flex-wrap 的简写属性：

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

快速检查

设置 flex-direction: column 后，justify-content 控制哪个轴？

回顾

在容器上设置 display: flex，即可为其子元素创建弹性布局上下文。flex-direction 设置主轴方向：row（水平）或 column（垂直）。所有弹性对齐属性都相对于这些轴，而不是固定的左、右、上、下方向。

常见问题解答

「Display、Flex 与 Flex Direction」课时是免费的吗？

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

「Display、Flex 与 Flex Direction」这节课中我会学到什么？

在容器上启用 Flexbox，并使用 flex-direction 控制主轴方向。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

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

「Display、Flex 与 Flex Direction」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. Display、Flex 与 Flex Direction
  2. Justify-Content 与 Align-Items
  3. Flex 换行与 Align-Content
  4. Flex Grow、Shrink 与 Basis
← 返回 CSS Academy