CSS布局混乱主因是结构未预设、样式未分层；应先语义化拆分模块（如header/sidebar/main/footer），再于需对齐的父容器上精准启用Flex，配合命名空间避免污染。
写 CSS 布局时越写越乱，通常不是因为技术不够，而是结构没提前想清楚、样式没合理分层。用 Flex 布局本身不能自动理清逻辑，关键在于“先拆模块，再用 Flex 控制内部关系”。
把页面切成独立可管理的模块
别一上来就写 .container 或 .main，先看设计稿或需求，用语义化容器明确划分功能区域，比如：
-
<header>—— 顶部导航栏 -
<aside class="sidebar">—— 左侧菜单栏 -
<main class="content">—— 主内容区 -
<footer>—— 底部信息
每个模块单独写样式，互不干扰。例如：.sidebar { width: 240px; } 和 .content { flex: 1; } 就不会互相覆盖。
用 Flex 控制模块内部排列，不是全页硬套
Flex 最适合解决“一组子元素怎么排”的问题，不是用来撑满整个页面的。常见误用是给 body 或最外层 div 加 display: flex，结果所有后代都受牵连。
立即学习“前端免费学习笔记（深入）”；
正确做法是：只在真正需要对齐/分布的父容器上启用 Flex，比如：
- 导航栏里的一排按钮 → 给
.nav加display: flex; justify-content: space-between; - 卡片列表横向等宽排列 → 给
.card-list加display: flex; flex-wrap: wrap; gap: 16px; - 表单左右标签+输入框 → 给每个
.form-row加display: flex; align-items: center;
加命名空间，避免样式污染
初级项目容易出现类名重复、样式意外生效。建议每个模块用统一前缀，比如：
-
header-logo、header-nav、header-user -
card-title、card-desc、card-action
这样即使多个模块都有 title，也不会互相影响。配合现代编辑器（如 VS Code）的类名提示，写起来也更顺。
借助浏览器开发者工具反向验证
布局乱了，别急着删代码。打开 DevTools，选中一个元素，看它的：
- 实际盒模型尺寸（padding/margin/border 是否意外叠加）
- 是否被某个父级的
flex或overflow截断 - 计算后的
display和flex-direction是不是你预期的
很多时候问题不在你写的那几行，而在某层祖先悄悄加了 flex-direction: column 或 align-items: stretch。
不复杂但容易忽略：拆模块是思维习惯，Flex 是工具。先画草图分块，再逐个用 Flex 搞定内部，整体会清爽很多。
