CSS · 布局
Flex 与 Grid：布局的两种思路
布局不是把元素移动到“看起来合适”的位置，而是先理解内容之间的关系，再选择合适的规则。
Flex 适合一维排列
导航栏、按钮组和横向信息条通常只需要控制一个方向。使用 Flex 可以方便地处理间距、对齐和换行。
Grid 适合二维结构
当页面同时有行和列的关系时，例如笔记卡片区或带侧栏的内容区，Grid 可以让代码更直接地表达布局意图。
响应式是默认要求
页面不应只为一种屏幕尺寸设计。本项目在窄屏下把多列卡片变为单列，并让导航自动换行，避免文字和控件重叠。
下一步练习
- 用 Flex 排列一个导航栏。
- 用 Grid 制作自适应卡片区域。
- 在浏览器开发者工具中测试窄屏布局。