Flex / Grid 怎么做常见布局
先理解原理和示例，再练习完整口述与追问。
回答要点
能写居中、两栏、三栏、等分、自适应布局。重点解释 flex-grow / shrink / basis；子项无法收缩时检查默认最小尺寸，按需要设置 min-width: 0。
原理拆解
Flex 主要解决一条主轴上的分配与对齐，Grid 更适合明确的行列二维关系。Flex 子项默认最小尺寸可能由内容决定，因此长文本区域经常需要 min-width:0 才能真正收缩；Grid 中 minmax(0,1fr) 可避免最小内容尺寸把弹性轨道撑大。选择方案要先定义固定列、弹性列、换行与溢出策略。
示例与推演
.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
.toolbar { display: flex; align-items: center; gap: 12px; }
.toolbar .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
外层用 Grid 安排侧栏与正文，工具栏用 Flex 分配标题和按钮。
易错点
flex:1 不等于某元素绝对占满剩余空间，仍受 basis、min/max 和兄弟项约束。视觉 order 改变不一定同步改变键盘导航及阅读顺序。
参考回答可直接练习口述
一维布局我优先 Flex，二维行列协作可用 Grid。水平垂直居中可用 display:flex、justify-content:center、align-items:center。两侧固定中间自适应可用两侧固定宽，中间 flex:1 并设置 min-width:0；Grid 可定义固定列与 minmax(0,1fr)。flex-grow 分剩余空间，shrink 处理不足，basis 决定基础尺寸，所以 flex:1 不是所有情况下都等于平均固定宽。文本省略还要配合 overflow 等规则。