CSS Flexbox 布局模型彻底改变了网页排版方式。相比传统浮动布局，Flexbox 以直观的方式控制元素对齐、方向、顺序和尺寸。理解 Flexbox…

CSS Flexbox 布局模型彻底改变了网页排版方式。相比传统浮动布局，Flexbox 以直观的方式控制元素对齐、方向、顺序和尺寸。理解 Flexbox 的工作原理，需要掌握容器和项目两个层面的属性。

flex-direction 属性决定主轴方向。row 是默认值，元素从左到右排列。row-reverse 元素从右到左。column 元素从上到下排列。column-reverse 元素从下到上。主轴决定了项目排列方向。

justify-content 属性定义项目在主轴上的对齐方式。flex-start 将项目对齐到主轴起点。flex-end 对齐到终点。center 居中对齐。space-between 两端对齐，项目间距相等。space-around 项目两侧间距相等。space-evenly 项目间距完全相等。

align-items 属性定义项目在交叉轴上的对齐方式。stretch 是默认值，项目拉伸填充容器。flex-start 交叉轴起点对齐。flex-end 交叉轴终点对齐。center 交叉轴居中。baseline 按文本基线对齐。

flex-wrap 属性控制项目换行方式。nowrap 是默认值，项目不换行，强制收缩。wrap 项目换行，第一行在上方。wrap-reverse 项目换行，第一行在下方。换行时涉及行对齐。

align-content 属性定义多行项目在交叉轴上的对齐方式。前提是存在多行项目且 flex-wrap 设为 wrap。属性值与 justify-content 类似，但作用于交叉轴。

flex-grow 属性定义项目放大比例。默认值为 0，不放大。值为 1 时项目填充剩余空间。大于 1 时按比例分配剩余空间。此属性使项目弹性填充容器。

flex-shrink 属性定义项目缩小比例。默认值为 1，空间不足时项目缩小。值为 0 时项目不缩小，保持固定尺寸。值为负数时无效。配合 flex-wrap 实现灵活布局。

flex-basis 属性定义项目在分配空间前的初始尺寸。默认值为 auto，参考项目自身尺寸。也可设固定值如 300px。flex-basis 与 width 同时存在时，flex-basis 优先级更高。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写。flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。推荐使用 flex 简写而非分开设置。

align-self 属性覆盖容器的 align-items 设置。适用于单个项目需要不同对齐方式的场景。属性值与 align-items 相同。常用值包括 auto、flex-start、flex-end、center。

order 属性控制项目在容器中的排列顺序。默认值为 0，数值越小越靠前。可以是负数。此属性仅改变视觉顺序，不影响 DOM 结构顺序，对屏幕阅读器顺序无影响。

Flexbox 项目 margin 属性有特殊行为。设置为 auto 时，吸收对应方向上的剩余空间。这意味着 margin: auto 可以实现居中效果，比 justify-content 和 align-items 更灵活。

项目绝育尺寸计算是 Flexbox 的核心算法。当容器尺寸大于所有项目尺寸总和时，flex-grow 决定如何分配剩余空间。当容器尺寸小于所有项目尺寸总和时，flex-shrink 决定如何收缩。

响应式设计中 Flexbox 应用广泛。导航栏使用 Flexbox 实现水平排列和均匀分布。卡片网格使用 Flexbox 实现换行布局。弹窗使用 margin: auto 实现居中。表单使用 Flexbox 对齐标签和输入框。

Flexbox 与 Grid 布局各有适用场景。Flexbox 适合一维布局，即单行或单列的项目排列。Grid 适合二维布局，即多行多列的项目排列。两者可以结合使用，外层 Grid 划分区域，内部 Flexbox 处理内容排列。

浏览器兼容性方面，Flexbox 得到所有现代浏览器的良好支持。移动端浏览器全部支持。桌面端 IE11 使用旧版规范，需要加 -ms- 前缀。实际项目应使用 Autoprefixer 自动处理前缀。

Flexbox 常见问题包括项目不换行、溢出、对齐不生效等。检查 flex-wrap 是否设置。检查主轴和交叉轴方向。确认容器是否设置了尺寸。检查项目是否设置了固定宽高。

Flexbox 调试技巧：Chrome 开发者工具 Flexbox 调试器可视化显示容器和项目的 Flexbox 属性。Firefox 开发者工具也有类似功能。使用边框或背景色直观查看项目布局。

Flexbox 是 CSS 布局的基础技能。掌握其核心概念和属性，能解决大部分单维度布局问题。结合 CSS Grid，可以构建任何复杂布局。勤加练习，积累经验。

（本文为 CSS 技术系列文章的第 2 篇）