Flexbox布局的核心特性与应用场景
Flexbox最大的优势在于它能轻松解决传统float布局的痛点。主轴和交叉轴的概念让元素排列变得直观，justify-content控制主轴对齐方式，align-items管理交叉轴对齐。实际开发中常见这三种典型场景：
比如电商网站的筛选栏，用display: flex配合flex-wrap: wrap实现标签自动换行，再通过flex: 1 0 120px控制每个标签的最小宽度，这样既保证整齐排列又适应不同屏幕尺寸。
Grid布局的二维排版魔力
Grid将网页变成真正的画布，通过grid-template-columns和grid-template-rows划分隐性格线。最近接到的后台管理系统项目就充分体现了Grid的价值：
fr单位创建弹性列，比如grid-template-columns: 1fr 3fr实现侧边栏与主内容区比例分配grid-area命名区域后，媒体查询里只需调整grid-template-areas就能彻底重构移动端布局gap属性替代传统的margin间距，避免计算误差| 属性 | Flexbox适用场景 | Grid适用场景 |
|---|---|---|
| 对齐控制 | 单轴线性排列 | 纵横双向控制 |
| 响应式 | 内容流适配 | 精确网格重构 |
混合布局的实战技巧
当遇到复杂界面时，Flexbox和Grid的配合使用能产生1+1>2的效果。某金融数据看板项目就采用了这种策略：
align-self实现局部定位特别注意minmax()函数的妙用，比如grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))既能保证卡片最小宽度，又能在宽屏时自动扩展。表单页面的错误提示区用flex-basis: 100%强制换行，避免破坏整体布局。
性能优化与浏览器兼容
虽然现代浏览器对CSS3布局支持良好，但在老版本IE仍需要后备方案。实践发现这些方法最有效：
@supports做特性检测，比如@supports (display: grid) flex: 1 0 auto替代旧的flex-grow写法-ms-grid等前缀移动端要特别注意flex-shrink的默认值可能导致内容挤压， 显式设置flex-shrink: 0保护关键元素。滚动容器内使用align-content: stretch能避免iOS Safari的渲染异常。
Grid布局中的fr单位其实是个很聪明的设计，它专门用来解决百分比布局的痛点。想象你正在搭建一个后台管理系统，左边需要固定300px的侧边栏，右边内容区要自适应剩余空间。如果用百分比，你得先计算父容器宽度再减去300px，还得考虑边框间距，算起来特别麻烦。但用fr就简单多了，直接写grid-template-columns: 300px 1fr，浏览器会自动把剩下的空间全部分配给1fr的区域，而且当窗口缩放时这个比例关系始终成立，完全不用手动计算。
实际开发中fr单位最厉害的地方在于它能和其他单位混用。比如在做响应式设计时，可以写grid-template-columns: minmax(200px, 300px) 2fr 1fr，这样第一列会被限制在200-300px之间，剩下的空间按2:1分配给后两列。这种动态分配的特性让Grid布局特别适合处理内容长度不确定的页面，比如新闻网站的图文混排区域，或者电商网站的商品列表，再也不用担心某个区块突然撑破布局了。
常见问题解答
Flexbox和Grid布局应该优先选择哪个？
Flexbox更适合一维线性布局，比如导航菜单、表单控件等单方向排列的场景；Grid则擅长处理二维复杂布局，如仪表盘、图库等需要同时控制行和列的界面。实际项目中经常混合使用，比如用Grid搭建整体框架，内部组件用Flexbox微调。
如何解决Flex项目在移动端被挤压变形的问题？
给需要保持尺寸的元素设置flex-shrink: 0，或者使用min-width/min-height限定最小尺寸。对于图文混排的卡片， 设置flex: 1 0 auto替代默认的flex: 1，这样能防止内容被过度压缩。
Grid布局中的fr单位与百分比有什么区别？
fr是剩余空间分配单位，会先扣除固定尺寸再分配；百分比则是相对于父容器计算。比如grid-template-columns: 300px 1fr 2fr，300px固定后，剩余空间按1:2分配，这种动态比例用百分比难以实现。
为什么justify-content有时在垂直方向不起作用？
justify-content始终作用于主轴方向，要控制交叉轴对齐需使用align-items。Flexbox中通过flex-direction改变主轴方向时，justify-content的作用方向也会随之改变，这是新手常混淆的点。
如何让Grid布局在IE11中部分兼容？
使用-ms-grid前缀属性，配合autoprefixer工具自动生成。注意IE11不支持gap属性，需要用margin替代；grid-template-areas语法也不支持， 改用明确的行列定位方式。
