引言
CSS布局已经发生了革命性的变化。告别了float和clear的hack时代，Flexbox和CSS Grid为我们提供了真正的布局引擎。然而，许多开发者仍然对两者的适用场景感到困惑——什么时候用Flexbox，什么时候用Grid，什么时候两者结合使用？本文将深入探讨这两种布局模式的特性、差异和协同使用策略。
Flexbox：一维布局的最佳选择
Flexbox（弹性盒子布局）专门为沿着单一轴线（水平或垂直）排列元素而设计。它的核心概念是弹性容器（flex container）和弹性项目（flex items）之间的关系。容器通过display: flex（或inline-flex）激活弹性上下文，之后其直接子元素变为弹性项目。
Flexbox的强大之处在于空间分配。flex-grow定义项目如何分配剩余空间；flex-shrink定义项目在空间不足时如何收缩；flex-basis定义项目的初始大小。flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0的简写，表示”均匀分配所有可用空间”。这在创建等宽列或自动填充的卡片列表中非常实用。
对齐控制是Flexbox的另一大优势。justify-content控制主轴（默认水平方向）上的对齐；align-items控制交叉轴（默认垂直方向）上的对齐。auto margins在Flexbox中有特殊行为——margin-left: auto会将项目推到容器的右侧，这是在Flexbox中实现两端对齐的经典技巧。gap属性（gutter）在Flexbox中同样可用，优雅地解决了项目间距的问题，无需复杂的margin计算。
Flexbox特别适合的布局场景包括：导航栏（项目在一行中均匀分布）、居中（单个元素的水平和垂直居中只需display: flex; justify-content: center; align-items: center）、媒体对象（图片和文本并排）、表单行（标签和输入框的灵活排列）等。简而言之，当你需要在一维方向上排列和对齐元素时，Flexbox是最自然的选择。
CSS Grid：二维布局的终极解决方案
CSS Grid是一种二维布局系统——它同时控制行和列，允许精确的网格布局定义。Grid通过display: grid激活，使用grid-template-columns和grid-template-rows定义网格的轨道（track）结构。
Grid最革命性的特性之一是fr单位——它代表”可用空间的一个份额”。grid-template-columns: 1fr 2fr表示创建两列，第二列的宽度是第一列的两倍。fr单位会减去任何固定大小（如px或em）的轨道后再分配剩余空间。minmax()函数定义轨道的最小和最大尺寸——grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))是最经典的自适应网格模式：自动创建尽可能多的列，每列至少250px宽，多余空间均匀分配。
网格布局的显式与隐式区别很重要。通过grid-template-*定义的网格是显式的；当内容超出显式网格范围时，浏览器会自动创建隐式网格轨道。grid-auto-rows和grid-auto-columns控制隐式轨道的尺寸。grid-auto-flow控制自动放置算法的行为——row（默认）按行填充、column按列填充、dense尝试填充网格中的空隙。
项目放置提供了像素级的布局控制。grid-column和grid-row通过指定起始线和结束线来控制项目的位置和跨度。使用命名线或命名区域可以进一步提高可读性。grid-template-areas是Grid最直观的特性之一——通过ASCII艺术式的语法直接描述布局结构，使CSS与设计稿之间的映射一目了然。
Flexbox vs Grid的决策框架
选择Flexbox还是Grid，可以遵循以下决策框架。如果布局是一维的（要么只关心行方向，要么只关心列方向），使用Flexbox。如果布局是二维的（需要同时控制行和列），使用Grid。如果布局的内容决定了大小（内容驱动），倾向于Flexbox。如果布局结构决定了大小（设计驱动），倾向于Grid。
某些场景下的互相替代也是可能的。一个简单的两列布局既可以用Flexbox（flex: 1 for each column）也可以用Grid（grid-template-columns: 1fr 1fr）实现。选择通常取决于是否需要Grid的行对齐能力——如果只是需要等宽列，Flexbox更简单；如果需要行间的对齐（各栏的内容开始位置在同一水平线上），Grid更合适。
协同使用：发挥各自的优势
在实际项目中，Flexbox和Grid的协同使用是最佳实践。通常的模式是：在外层使用Grid定义页面的整体布局（页头、侧边栏、主内容、页脚），在内层使用Flexbox处理组件级别的排列（导航栏、卡片内容、按钮组等）。Grid的grid-template-areas在外层提供了清晰的布局结构图；Flexbox在内层提供了灵活的内容排列。
例如，一个典型的dashboard布局可以使用Grid定义整体的四区域结构（header、sidebar、main、footer），同时在每个区域内使用Flexbox进行子元素的排列。header可以用Flexbox排列logo、导航和用户菜单；sidebar可以用Flexbox纵向排列菜单项；main中的卡片列表可以用Flexbox或Grid（取决于是否需要行对齐）。
现代CSS的新特性
CSS Nesting（原生CSS嵌套）是近年来最受期待的CSS特性之一。它允许将子选择器写在父选择器中，类似于Sass的嵌套语法。配合:has()选择器（”父选择器”）和容器查询（Container Queries），CSS的表达能力达到了前所未有的高度。:has()允许根据子元素的状态来设置父元素的样式——例如.card:has(img)选择包含图片的卡片。容器查询允许基于父容器的尺寸而非视口尺寸来调整样式，这是真正实现组件级响应式的关键。