CSS布局：flex与grid网格系统对比

理解Flex与Grid的布局模型差异

Flexbox（弹性盒子）与 CSS Grid（网格布局）的核心差异在于维度控制。Flex 是一维布局模型，专注于单行或单列的内容排列，通过 flex-direction 决定主轴方向，子项沿主轴依次排布，交叉轴对齐由 align-items 控制。Grid 则是二维布局模型，同时定义行与列的轨道，通过 grid-template-columns 和 grid-template-rows 构建网格骨架，子项可跨越多个单元格。在容器层面，Flex 依赖 display: flex 激活弹性上下文，子项通过 flex-grow、flex-shrink 分配剩余空间；Grid 使用 display: grid 创建网格上下文，子项通过 grid-column 和 grid-row 精确定位。理解两者差异的关键在于：若内容流向单一且需动态伸缩，选 Flex；若需同时控制行列结构与区域划分，选 Grid。

用Flex实现常见一维页面布局

在实际开发中，导航栏与卡片列表是 Flex 的典型应用场景。以顶部导航为例，设置容器 display: flex 后，通过 justify-content: space-between 可将 Logo 与菜单项分别推至两端，align-items: center 确保垂直居中对齐。若需实现响应式卡片横排，可结合 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-area 配合 grid-template-areas 进行语义化命名，例如将页面划分为 header、sidebar、main、footer，子项通过 grid-area: sidebar 直接映射到对应区域。Grid 还支持隐式网格生成，当子项数量超出显式定义时，浏览器会自动创建新轨道。这种二维控制能力使 Grid 在仪表盘、杂志排版等需要严格对齐与跨行跨列的场景中表现优异。

对比选型：什么时候用Flex，什么时候用Grid

项目选型应遵循维度优先原则：单方向内容流（如按钮组、列表项、导航菜单）优先使用 Flex，因其代码简洁且天然支持内容自适应；需同时控制行列结构、实现区域划分或复杂对齐时，优先选择 Grid。现代前端开发常采用 Grid 搭骨架、Flex 填内容的组合策略。例如，页面整体布局使用 Grid 划分头部、侧边栏与主内容区，而侧边栏内的菜单项或主内容区的卡片内部元素则使用 Flex 进行一维排列。响应式场景下，Grid 的 auto-fit 与 minmax 能减少媒体查询代码，而 Flex 的 flex-wrap 更适合内容流式换行。避免过度嵌套 Grid 导致性能损耗，也避免用 Flex 强行模拟二维网格造成维护困难，合理混用可兼顾开发效率与渲染性能。

排查Flex与Grid布局常见问题

布局异常多源于属性冲突或尺寸计算误解。Flex 常见宽度溢出问题通常由 flex-shrink: 0 或固定宽度导致，可通过 DevTools 的 Flex 检查器查看子项实际计算尺寸，并改用 min-width: 0 或调整 flex-basis 修复。Grid 中若出现轨道重叠或空白，多因 grid-column 越界或 minmax 范围设置不合理，使用 Chrome DevTools 的 Grid 检查器可直观显示网格线、轨道尺寸与隐式网格区域。gap 与百分比宽度混用时易引发计算溢出，建议优先使用 fr 单位或 calc() 明确分配。响应式断点失效常因未重置容器 display 属性或子项 flex 值未随媒体查询更新。调试时应逐层检查盒模型，利用浏览器布局面板高亮异常区域，对照规范修正轨道定义与弹性比例。