CSS 布局：从理解到实践

页面布局可以先从两个问题入手：内容如何流动，以及空间如何分配。理解这两件事，比记住所有属性更有帮助。

一维用 Flex，二维用 Grid

导航栏和按钮组通常只有一个排列方向，适合 Flex。文章列表同时需要行与列，适合 Grid。

.articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 650px) {
  .articles { grid-template-columns: 1fr; }
}

内容比尺寸更重要

为内容设置最大宽度，让正文在大屏幕上仍然容易阅读。对于弹性子元素，min-width: 0 能避免长文本把布局撑开。

检查真实的边界

试着把标题改成长句、把字体放大，再用小屏幕查看。好的布局应该能够容纳这些变化。

1. 内容是否发生水平溢出？
2. 导航是否仍然可以点击？
3. 代码块是否能独立横向滚动？
4. 主体文字是否仍有合理的行长？