现代网站需要适配从手机到桌面的各种屏幕尺寸，传统的float布局已经难以满足需求。CSS Flexbox和Grid是现代CSS布局的两大核心利器，本文详细介绍它们的使用方法。
一、Flexbox弹性盒子布局
Flexbox是一维布局模型，适合处理单行或单列的元素排列。核心概念是主轴和交叉轴，通过设置flex-direction可以改变主轴方向。
常用属性：display:flex开启弹性盒子；justify-content主轴对齐；align-items交叉轴对齐；flex-wrap换行控制；flex-grow/shrink/basis伸缩比例。
典型应用场景：导航菜单、卡片列表、居中弹窗、底部固定等。
二、Grid网格布局
CSS Grid是二维布局模型，可以同时控制行和列，适合整体页面布局和复杂的网格系统。通过grid-column和grid-row可以灵活控制元素占据的位置和大小。
三、媒体查询响应式断点
响应式设计通过媒体查询针对不同屏幕应用不同样式。常用断点：移动端max-width:768px；平板769px-1024px；桌面1025px以上。建议使用移动优先策略，先为小屏幕编写样式，再通过min-width添加大屏幕样式。
四、rem与视口单位
使用rem作为长度单位可以实现基于根元素字号的比例缩放。结合vw/vh视口单位，可以创建流式布局。响应式字体使用clamp()函数自动在最小值和最大值之间平滑过渡。
五、总结
Flexbox和Grid不是互相替代的关系，而是互补使用。简单的单维布局用Flexbox，复杂的整体页面结构用Grid。专业的网页开发团队（如廷云信息）会根据设计需求选择最合适的布局方案。