为什么选择Flexbox？

Flexbox（弹性盒布局）是CSS3引入的强大布局模块，它让复杂的布局变得简单直观。无论是水平居中、垂直居中，还是复杂的响应式布局，Flexbox都能轻松搞定。

Flexbox核心概念

1. 容器属性

• display: flex - 启用弹性盒布局
• flex-direction - 主轴方向（row/column）
• justify-content - 主轴对齐方式
• align-items - 交叉轴对齐方式
• flex-wrap - 是否换行

2. 项目属性

• flex-grow - 放大比例
• flex-shrink - 缩小比例
• flex-basis - 基础宽度
• align-self - 单独对齐方式

实战案例

水平垂直居中

.container { display: flex; justify-content: center; align-items: center; height: 100vh; }

导航菜单布局

.nav { display: flex; justify-content: space-between; align-items: center; }

浏览器兼容性

Flexbox在现代浏览器中得到广泛支持，包括Chrome、Firefox、Safari、Edge等。无需担心兼容性问题，可以放心使用。

总结

Flexbox是现代CSS布局的首选方案，它简化了许多过去需要复杂技巧才能实现的布局。掌握Flexbox，将大幅提升你的CSS布局能力。