什么是 CSS 弹性盒布局模型？

Flexbox（弹性盒布局）是一维布局模型，控制元素在一条轴（主轴或交叉轴）上的排列和对齐。设 display: flex 后，容器变成弹性容器，子元素变成弹性项目。

核心概念：

• 主轴（flex-direction 决定方向）和交叉轴
• 容器属性：justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-wrap（换行）、gap（间距）
• 项目属性：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础大小）、align-self（单独对齐）

最常用的三件套：display: flex; justify-content: center; align-items: center; —— 一行代码实现水平垂直居中。

追问

flex: 1 是什么意思？

flex: 1 = flex-grow: 1; flex-shrink: 1; flex-basis: 0%。表示元素按比例瓜分剩余空间，常用于等分布局。flex: auto 不同在于 flex-basis: auto（先看元素自身尺寸再瓜分剩余空间）。

Flexbox 和 Grid 什么时候用哪个？

Flexbox 是一维的，适合组件内部排列（导航栏、按钮组、表单行）。Grid 是二维的，适合页面级布局（一行多列、复杂网格）。实际项目混用居多：Grid 做页面骨架，Flexbox 做组件内部。

为什么 flex 子元素设置 width 有时不生效？

flex-shrink 默认是 1，空间不够时项目会被压缩。加上 flex-shrink: 0 或 min-width: <你的宽度> 阻止收缩即可。