Flex进阶：主轴侧轴居中与对齐技巧

详解Flex布局主轴、侧轴对齐属性，掌握justify-content、align-items核心用法，实现元素居中、均分、对齐等主流布局效果。

Flex布局最核心、最实用的功能就是快速实现元素居中与自适应对齐，相比传统定位、浮动居中方案，Flex居中代码极简、兼容性强、适配各类屏幕尺寸，是开发中高频使用的布局技巧。

Flex布局默认横向为主轴、纵向为侧轴，所有对齐属性均作用于父容器。justify-content 用于控制主轴（水平方向）对齐方式，常用取值包含center居中、space-between两端均分、space-around环绕均分、flex-start左对齐、flex-end右对齐，可快速实现各类水平排列效果。

align-items 用于控制侧轴（垂直方向）对齐方式，常用取值center垂直居中、flex-start顶部对齐、flex-end底部对齐、stretch拉伸铺满，完美适配垂直居中、模块对齐等场景。

两行核心代码即可实现万能水平垂直居中，适配盒子、文字、图片等所有元素，是前端开发的万能居中方案：

.box{
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

通过组合两个对齐属性，可以灵活实现导航均分、卡片居中、弹窗居中、内容对齐等各类布局需求，彻底摆脱传统布局的繁琐适配问题，大幅提升页面开发效率。