CSS布局是前端工程师的基本功，字节、腾讯、阿里等大厂前端面试必考。Flex和Grid是现代CSS布局的两大核心，能否清楚地区分它们的适用场景，反映了你的前端架构能力和工程实践水平。
先明确定位：Flex是一维布局（沿单轴方向排列），Grid是二维布局（同时控制行和列）。
讲Flex核心属性：display:flex、flex-direction（主轴方向）、justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-grow/shrink/basis（弹性伸缩）、flex-wrap（换行）。
讲Grid核心属性：display:grid、grid-template-columns/rows（定义网格轨道）、grid-gap（间距）、fr单位（等分剩余空间）、repeat()和minmax()函数。
对比使用场景：Flex适合导航栏、卡片行、居中对齐等组件级布局；Grid适合页面整体布局、仪表盘、复杂网格等。
强调两者配合使用：Grid做页面结构，Grid单元格内部用Flex排列内容。
Flex和Grid是CSS现代布局的两大利器，核心区别在于维度。Flex是一维布局系统，一次只能处理一个方向（行或列），适合组件内部的元素排列。主轴方向通过flex-direction控制，主轴对齐用justify-content（center、space-between、space-around等），交叉轴对齐用align-items。flex属性是flex-grow、flex-shrink、flex-basis的简写，控制元素如何分配剩余空间。flex-wrap开启后元素可以换行，但换行后每行独立计算，无法对齐列——这就是Flex的一维局限。Grid是真正的二维布局，可以同时定义行和列。grid-template-columns: repeat(3, 1fr)创建三等分列，minmax(200px, 1fr)实现响应式最小宽度。grid-template-areas允许用命名区域进行语义化布局，非常直观。fr单位是Grid特有的，按比例分配剩余空间。使用场景上，导航栏、工具栏、表单一行内的对齐用Flex；整体页面布局（header/sidebar/main/footer）、卡片网格、仪表盘用Grid。实际项目中两者结合使用效果最好：外层用Grid搭建页面骨架，Grid单元格内部用Flex排列元素。响应式设计方面，Grid的auto-fill配合minmax()可以不用媒体查询就实现自适应列数：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))。
面试时可能要求现场写代码实现水平垂直居中——Flex用justify-content+align-items，Grid用place-items:center。
掌握几个经典布局模式：圣杯布局、双飞翼布局用Grid如何实现。
强调两者是互补关系而非替代关系，展示你的工程思维。
现场写CSS时如果忘了属性名，即答侠可以实时提供正确的属性和值。
flex:1等价于flex-grow:1, flex-shrink:1, flex-basis:0%，表示元素可以等比例占满剩余空间。
fr是分配剩余空间的比例，会自动扣除gap和固定尺寸元素。百分比基于容器总宽度，不会自动扣除gap，可能导致溢出。
两者兼容性都很好。移动端简单布局用Flex更直观，复杂页面结构用Grid。建议根据布局复杂度选择。