一维与二维：布局模型的底层差异
Flexbox与Grid的根本区别在于对空间维度的定义方式。Flexbox是一维布局模型，它只关注单一方向上的内容排列，无论是水平行还是垂直列。通过设置 flex-direction 决定主轴，子元素沿主轴依次排列，而交叉轴的对齐则由 align-items 控制。这种模型适合内容尺寸不确定、需要动态伸缩的场景。 Grid则是二维布局模型，它同时定义行与列的轨道结构。通过 grid-template-columns 和 grid-template-rows，开发者可以构建精确的网格骨架。子元素通过 grid-column 和 grid-row 属性在二维空间中进行精确定位或跨区排列。理解这一差异的关键在于：若内容流向单一且需自适应伸缩，Flex更简洁；若需同时控制行列结构与复杂区域划分，Grid更具优势。
Flex实战：导航栏与卡片列表的一维排列
在实际开发中，Flexbox最适合处理一维内容流。以顶部导航栏为例，设置容器 display: flex 后，利用 justify-content: space-between 可将Logo与菜单项分别推至两端，配合 align-items: center 实现垂直居中。这种布局代码简洁，且能自动适应子项内容的变化。 对于响应式卡片列表，Flexbox通过 flex-wrap: wrap 允许子项在空间不足时自动换行，结合 gap: 16px 统一间距，避免了传统 margin 导致的边缘溢出问题。通过调整 flex-direction: column，可直观验证主轴与交叉轴的切换效果：原本水平排列的卡片转为垂直堆叠，此时 justify-content 控制垂直分布，align-items 控制水平对齐。Flex的优势在于内容尺寸未知时仍能保持弹性伸缩，配合 flex: 1 可让子项自动填满可用空间，非常适合流式一维排版。
Grid实战：二维网格与语义化区域划分
Grid的核心优势在于对二维轨道的精确控制。通过 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，可快速构建自适应卡片网格：当视口宽度充足时自动增加列数，不足时自动换行，无需媒体查询即可实现基础响应式。grid-template-rows 用于定义行高，结合 gap 可统一设置行列间距。 对于复杂页面分区，Grid支持通过 grid-area 配合 grid-template-areas 进行语义化命名。例如，将页面划分为 header、sidebar、main、footer，子项通过 grid-area: sidebar 直接映射到对应区域，无需关心具体坐标。Grid还支持隐式网格生成，当子项数量超出显式定义时，浏览器会自动创建新轨道。这种二维控制能力使Grid在仪表盘、杂志排版等需要严格对齐与跨行跨列的场景中表现优异。
选型策略：维度优先与混合布局
项目选型应遵循维度优先原则：单方向内容流（如按钮组、列表项、导航菜单）优先使用Flex，因其代码简洁且天然支持内容自适应；需同时控制行列结构、实现区域划分或复杂对齐时，优先选择Grid。 现代前端开发常采用Grid搭骨架、Flex填内容的组合策略。例如，页面整体布局使用Grid划分头部、侧边栏与主内容区，而侧边栏内的菜单项或主内容区的卡片内部元素则使用Flex进行一维排列。响应式场景下，Grid的auto-fit与minmax能减少媒体查询代码，而Flex的flex-wrap更适合内容流式换行。避免过度嵌套Grid导致性能损耗，也避免用Flex强行模拟二维网格造成维护困难，合理混用可兼顾开发效率与渲染性能。
调试指南：常见布局异常与排查方法
布局异常多源于属性冲突或尺寸计算误解。Flex常见宽度溢出问题通常由 flex-shrink: 0 或固定宽度导致，可通过DevTools的Flex检查器查看子项实际计算尺寸，并改用 min-width: 0 或调整 flex-basis 修复。 Grid中若出现轨道重叠或空白，多因 grid-column 越界或 minmax 范围设置不合理，使用Chrome DevTools的Grid检查器可直观显示网格线、轨道尺寸与隐式网格区域。gap与百分比宽度混用时易引发计算溢出，建议优先使用 fr 单位或 calc() 明确分配。响应式断点失效常因未重置容器 display 属性或子项 flex 值未随媒体查询更新。调试时应逐层检查盒模型，利用浏览器布局面板高亮异常区域，对照规范修正轨道定义与弹性比例。
