Flexbox（弹性盒子模型）是CSS中用于布局的模块，能够灵活地对齐和分配空间，特别适合创建响应式设计。以下是关键知识点：
核心概念 ✅
- 主轴（Main Axis）：元素排列的主要方向（通过
flex-direction控制） - 交叉轴（Cross Axis）：垂直于主轴的方向（通过
flex-wrap和justify-content/align-items调整） - 弹性容器（Flex Container）：通过
display: flex定义的父元素 - 弹性项（Flex Items）：容器内的子元素，自动成为弹性项
常用属性 🔧
| 属性 | 作用 |
|---|---|
flex-direction |
定义主轴方向（row/column/row-reverse/column-reverse） |
justify-content |
主轴对齐方式（flex-start/flex-end/center/space-between/space-around） |
align-items |
交叉轴对齐方式（stretch/center/flex-start/flex-end） |
flex-wrap |
是否换行（nowrap/wrap/wrap-reverse） |
实战示例 📌
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
此代码可创建一个水平分布的弹性容器，子元素在两侧对齐，垂直方向居中，并支持换行。
扩展学习 🌐
如需深入了解其他布局方式，可访问 CSS Grid指南 探索更复杂的二维布局方案。