现代 CSS 已经提供了成熟、可靠的页面布局能力。Flexbox 适合处理一维排列，Grid 适合处理二维网格，再配合响应式规则，就能覆盖大多数网页场景。
1. 使用 Flexbox 处理一维布局
当元素主要沿横向或纵向排列时，可以优先考虑 Flexbox。它很适合导航栏、按钮组、居中布局和卡片内部结构。
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
2. 使用 Grid 构建二维网格
当页面同时需要控制行和列时，Grid 会更清晰。例如响应式卡片列表可以这样写：
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
3. 响应式设计的关键
- 使用相对宽度和
max-width控制内容范围。 - 只在布局真正需要变化时添加媒体查询。
- 避免固定宽度造成手机端横向滚动。
- 保证按钮和导航在触屏设备上有足够的点击区域。
4. Flexbox 与 Grid 如何选择
如果重点是元素之间的排列关系，用 Flexbox；如果重点是页面的行列结构，用 Grid。两者并不冲突，实际项目中经常组合使用。
5. 保持布局可维护
优先使用语义清楚的类名，把颜色、间距等重复值放进 CSS 变量中，并尽量减少只为修补某个屏幕宽度而添加的临时规则。这样页面后续扩展时会更稳定。
← 返回文章列表