用 Flexbox 排一维布局

这一节要完成什么

把导航和卡片操作区改成能换行、对齐稳定的一维布局。

先理解：为什么要学它

Flexbox 适合一行或一列的分配。

跟着做

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.card-actions > :last-child {
  margin-inline-start: auto;
}

1. 先画出主轴方向：导航项从左到右，因此使用 row。
2. 加入 display:flex 和 gap，删除用 margin 拼出来的间距。
3. 缩窄窗口，打开 flex-wrap，确认项目换行而非溢出。
4. 在 DevTools Flex overlay 中查看主轴、间隙和剩余空间。

关键代码怎么读

• Flexbox 适合一行或一列的分配。
• justify-content 沿主轴，align-items 沿交叉轴。
• margin-inline-start:auto 可把一个项目推到末端。

常见错误：看到什么，检查什么

自己完成一次

用 Flexbox 完成顶部导航：品牌在前，链接成组，窄屏自动换行，Tab 顺序不因视觉排列改变。

完成检查

• 我完成了本节要求的可见结果
• 我能解释关键代码的输入、处理和输出
• 我测试了正常、边界和错误情况