agentmentor：课，交给你的 agent 来写

第 1 课：让盒子排成一行的那行声明

没有 Flexbox 时，盒子只会竖着堆。为什么？

往页面上放三个 <div>，它们会竖直堆叠，每个独占一行。这是正常的块级布局，而多年以来，把它们并排放的办法只有浮动和 inline-block 这类到处漏间距 bug 的手段。如果 Flexbox 在你眼里是一堆“粘贴上去再祈祷”的属性，通常是因为没人给你讲它做的第一件事，也就是其他所有属性都依赖的那件事。

完整课节，在你的电脑里继续

```agentmentor-check
{
  "id": "css-flexbox-flex-items-scope",
  "label": "哪些元素是 flex item",
  "prompt": "你在一个装着三张卡片的容器上设置了 display: flex，每张卡片内部还有一个标题和一个段落。哪些元素会变成 flex item、被摆放到容器的主轴上？",
  "whyHere": "初学者常以为 display: flex 会安排所有后代元素。实际上只有容器的直接子元素变成 flex item，而这决定了主轴真正移动的是什么。",
  "mode": "single",
  "choices": [
    { "id": "all", "text": "容器里的每一个元素，包括标题和段落。", "correct": false, "feedback": "flex 只往下作用一层。标题和段落是各张卡片的子元素，所以安排它们的是卡片，不是这个 flex 容器。" },
    { "id": "direct", "text": "只有容器的直接子元素，也就是那三张卡片。", "correct": true, "feedback": "对。display: flex 把直接子元素变成 flex item；卡片自己的内容由卡片来安排，不由这个 flex 容器安排。" },
    { "id": "classed", "text": "只有你额外加了特殊 flex class 的元素。", "correct": false, "feedback": "不存在按元素逐个开启的 class。父元素设为 display: flex 后，直接子元素会自动成为 flex item。" }
  ],
  "copyPurpose": "把这道题和我的回答复制给 agent，让它检查我是否仍然以为 display: flex 会安排所有后代元素，而不是只作用于直接子元素。"
}
```

```agentmentor-check { "id": "css-flexbox-flex-items-scope", "label": "哪些元素是 flex item", "prompt": "你在一个装着三张卡片的容器上设置了 display: flex，每张卡片内部还有一个标题和一个段落。哪些元素会变成 flex item、被摆放到容器的主轴上？", "whyHere": "初学者常以为 display: flex 会安排所有后代元素。实际上只有容器的直接子元素变成 flex item，而这决定了主轴真正移动的是什么。", "mode": "single", "choices": [ { "id": "all", "text": "容器里的每一个元素，包括标题和段落。", "correct": false, "feedback": "flex 只往下作用一层。标题和段落是各张卡片的子元素，所以安排它们的是卡片，不是这个 flex 容器。" }, { "id": "direct", "text": "只有容器的直接子元素，也就是那三张卡片。", "correct": true, "feedback": "对。display: flex 把直接子元素变成 flex item；卡片自己的内容由卡片来安排，不由这个 flex 容器安排。" }, { "id": "classed", "text": "只有你额外加了特殊 flex class 的元素。", "correct": false, "feedback": "不存在按元素逐个开启的 class。父元素设为 display: flex 后，直接子元素会自动成为 flex item。" } ], "copyPurpose": "把这道题和我的回答复制给 agent，让它检查我是否仍然以为 display: flex 会安排所有后代元素，而不是只作用于直接子元素。" } ```

# 第 1 课：让盒子排成一行的那行声明 > 本课目标： > - 说出 `display: flex` 对容器及其子元素做了什么。 > - 辨认哪些元素会变成 flex item（哪些不会）。 > - 预测 flex item 默认沿主轴排成一行。 >

# 第 2 课：两条轴，两个属性 > 本课目标： > - 说出 flex 容器的主轴和交叉轴。 > - 把 `justify-content` 对应到主轴，把 `align-items` 对应到交叉轴。 > - 有意识地把一个元素水平加垂直居中，而不是碰运气。 >

# 第 3 课：flex-direction 与主轴的转向 > 本课目标： > - 说出 `flex-direction` 做什么，并列出它的四个值。 > - 解释为什么 `justify-content` 不是“水平属性”。 > - 预测主轴变成竖列后，哪个属性负责上下移动 item。 >

# 第 4 课：剩余空间的分配 > 本课目标： > - 解释 `flex-basis`、`flex-grow`、`flex-shrink` 各自控制什么。 > - 预测 `flex-grow` 如何划分自由空间（不是总宽度）。 > - 读懂 `flex` 简写，并知道 `flex: 1` 展开成什么。 >

# 第 5 课：换行与真实布局 > 本课目标： > - 用 `flex-wrap: wrap` 让 item 流到多行，而不是溢出容器。 > - 用 `gap` 拉开 item 间距，代替琐碎的 margin。 > - 用整门课学到的东西，搭一个真实的响应式导航栏和卡片行。 >

{ "schemaVersion": 2, "originalRequest": "我已经会写基础的 HTML 和 CSS，能设置颜色、内边距和宽度，也能给简单页面做样式，但 Flexbox 对我仍然像碰运气。我从来分不清什么时候用 justify-content、什么时候用 align-items，对主轴和交叉轴没有直觉，flex-grow/flex-shrink/flex-basis 也让我困惑。我不会 CSS Grid。教我 Flexbox，让我能有把握地搭出居中、导航栏、卡片行这些常见布局。", "learnerBrief": "一个熟悉基础 HTML/CSS 但不熟悉 Flexbox 的开发者。目标是建立 flex 容器两条轴的真实心智模型，让对齐和尺寸属性不再靠猜，最终能搭出常见的真实布局。",

# Sources ## S1 — MDN: Basic concepts of flexbox URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts - authority: official-docs - supports: 第 1-3 课：`display: flex` 做什么、直接子元素成为 flex item、主轴与交叉轴，以及 `justify-content` 沿主轴对齐、`align-items` 沿交叉轴对齐。