CSS布局在近年来经历了革命性的发展。Flexbox和Grid的普及让复杂布局的实现变得前所未有的简单，而容器查询（Container Queries）的到来更是开启了组件级响应式设计的新时代。本文将系统介绍这些现代CSS布局技术的核心概念和实战应用，帮助你摆脱浮动和定位的hack，写出更优雅、更易维护的布局代码。
Flexbox核心与实战
Flexbox是一维布局模型，非常适合用于导航栏、按钮组、卡片列表等单行或单列的布局场景。核心概念包括主轴和交叉轴，通过justify-content控制主轴对齐方式，align-items控制交叉轴对齐方式。flex-grow、flex-shrink、flex-basis三个属性控制子元素的伸缩行为，通常可以简写为flex。
在实际应用中，Flexbox最常见的用途是实现垂直居中。只需在父容器上设置display: flex和align-items: center，子元素就能轻松实现垂直居中，不再需要使用line-height或绝对定位的hack。同时，Flexbox的gap属性可以方便地设置子元素之间的间距，比传统的margin方式更简洁。
Grid二维布局
CSS Grid是二维布局系统，可以同时控制行和列，是实现页面整体布局和复杂卡片网格的最佳选择。通过grid-template-columns和grid-template-rows定义网格轨道，使用fr单位实现弹性分配。repeat()函数和auto-fill/auto-fit关键字可以轻松实现自适应的网格布局，无需媒体查询就能适应不同屏幕宽度。
Grid的区域命名功能（grid-template-areas）让布局结构一目了然，通过给网格区域命名并在子元素中指定grid-area，可以直观地构建页面布局。同时，Grid支持行和列的间距（gap），以及子元素的跨列跨行（grid-column、grid-row），能够实现非常复杂的布局效果。
容器查询：组件级响应式
传统的媒体查询（Media Queries）是基于视口大小的，这在组件化开发中存在局限——同一个组件在不同的容器中可能需要不同的布局，但媒体查询无法感知容器的大小。容器查询（Container Queries）解决了这个问题，它允许组件根据其所在容器的大小来调整样式。
使用时，先在父容器上设置container-type: inline-size，然后在子组件中使用@container规则根据容器宽度应用不同的样式。这使得组件真正实现了自包含的响应式设计，无论放在页面的哪个位置都能正确展示。目前主流浏览器都已支持容器查询，可以在生产环境中放心使用。
布局技巧与最佳实践
在实际项目中，Flexbox和Grid通常配合使用：整体页面布局使用Grid，组件内部布局使用Flexbox。对于需要兼容旧浏览器的场景，可以使用@supports进行特性检测，为不支持Grid的浏览器提供Flexbox降级方案。同时，善用CSS变量（Custom Properties）管理布局相关的尺寸和间距，便于统一调整和主题切换。
子元素的尺寸控制方面，aspect-ratio属性可以方便地设置宽高比，非常适合图片和视频容器。min()、max()、clamp()等CSS函数可以实现更灵活的尺寸计算，减少媒体查询的使用。例如，使用clamp(16px, 2vw, 24px)可以让字体大小在视口变化时平滑过渡。
性能与可访问性
现代CSS布局在性能上也有优势。Flexbox和Grid都是浏览器原生支持的布局方式，渲染效率高于使用JavaScript计算布局。同时，注意避免使用会触发重排（reflow）的属性，在动画中优先使用transform和opacity。可访问性方面，确保布局在视觉顺序和DOM顺序上保持一致，不要仅靠CSS的order属性改变视觉顺序而忽略了屏幕阅读器的读取顺序。