一、Flexbox 的核心概念与对齐属性
1.1 设定弹性容器与主轴副轴
在父容器上应用 display: flex，子元素会进入弹性布局状态，文档流的排列方式从普通块状流转为一维的盒子排布，因此可以获得更灵活的对齐能力。
主轴决定子项的水平排列方向，而 副轴则决定竖直方向的参考系。通过 flex-direction 可以快速切换主轴的方向，例如从水平改为垂直排布。
/* 设定弹性容器 */
.container{ display: flex; flex-direction: row; }1.2 主轴对齐与副轴对齐的核心属性
justify-content 用于在主轴方向上对齐子项，常见取值包含 center、flex-start、flex-end、space-between、space-around 等，用于实现水平居中、两端对齐或等间距分布等效果。
align-items 用于单行内在副轴上的对齐，常见取值有 stretch、center、flex-start、flex-end，帮助实现垂直方向的对齐。若需要处理多行对齐，可以结合 align-content 使用。
.row{ display:flex; justify-content: center; align-items: center; }二、居中布局的实战应用
2.1 水平与垂直居中
要在父容器中让子项水平与垂直都居中，最佳做法是将父容器设为弹性盒子并同时使用 justify-content: center 与 align-items: center，这在多数场景下能实现稳定的居中效果。
如果需要让容器在视口中全屏居中，可以将父容器高度设为可测量值，如 min-height: 100vh，从而确保居中参照始终存在。
/* 全屏居中容器示例 */
.fullscreen{ display:flex; justify-content:center; align-items:center; min-height:100vh; }2.2 内容区域内的居中子元素
当需要把某个子元素居中显示在一个容器内时，除了使用整行的居中外，还可以结合弹性盒子中的 gap 与 flex: 0 0 auto 控制子项大小，确保居中同时保持等距。
在弹性布局下，使用 margin: auto 也能实现局部居中效果，但推荐的方式是通过父容器对齐属性进行统一控制，避免布局漂移。
.container{ display:flex; justify-content:center; align-items:center; height:200px; gap:16px; }
.child{ padding:12px 20px; }三、实现多元素并排显示的技巧
3.1 固定宽度的多列布局
当需要将多项以固定宽度并排呈现时，可以为子项设置固定宽度，或通过 flex-basis 固定初始尺寸，同时设置 flex-grow: 0 避免自动拉伸。
配合 gap，可以快速实现均匀间距的多列布局，视觉效果更加整洁。
.card{ width: 240px; flex: 0 0 240px; }3.2 自适应等分列布局
若希望子项在可用空间内等分宽度，可以将 flex: 1 应用于子项，并确保最小宽度不会过小（通过 min-width 控制）。
通过设置 flex-wrap: wrap，当容器宽度不足时，子项会自动换行，保持整洁的排布。
.grid{ display:flex; gap:12px; flex-wrap: wrap; }
.grid > .item{ flex: 1 1 200px; min-width: 200px; }四、响应式与换行策略
4.1 gap 与换行的实际作用
gap 属性替代传统 margin 的相邻元素间距，能够在复杂排版中保持均匀的间距。搭配 flex-wrap: wrap，在宽度变化时自动实现换行。
通过设置容器宽度为 100% 与子项的 min-width，可以在不同屏幕尺寸下实现自适应换行和整齐的网格效果。
.responsive{ display:flex; gap:16px; flex-wrap: wrap; }4.2 对齐方式的替换策略
在需要两端对齐或等间距的场景中，可以灵活使用 justify-content: space-between、space-around 与 space-evenly，以实现不同设计需求的分布。
.justify{ display:flex; justify-content: space-between; }五、调试小贴士与常见坑点
5.1 垂直居中的常见坑点及解决办法
如果父容器没有明确高度，垂直居中可能失效。确保父容器具有可测量的高度，常用做法包括 min-height、height 或使用视口单位（vh）。
在多行子元素的场景下，align-content 的作用可能不符合预期，此时需要结合 flex-wrap 与单行对齐属性进行调整，以获得稳定的多行对齐效果。
.centered{ display:flex; align-items:center; justify-content:center; min-height: 60vh; }5.2 与浏览器兼容性相关的注意点
现代浏览器对 Flexbox 的实现基本一致，但对旧版浏览器（如 IE11 及更早版本）可能存在一些行为差异。为实现更好的兼容，可以提供简单的回退写法或在关键布局处多加测试。
/* IE11 兼容的简单回退示例 */
.container{ display:-ms-flexbox; display:flex; -ms-flex-pack:center; justify-content:center; -ms-flex-align:center; align-items:center; }