Flexbox（弹性盒子）是一种强大的布局工具，能高效实现响应式设计。以下是核心知识点：
🧩 基础概念
- 主轴（Main Axis）：默认水平方向，通过
flex-direction控制 - 交叉轴（Cross Axis）：垂直方向，
flex-wrap决定是否换行 - 对齐方式：
justify-content（水平对齐）、align-items（垂直对齐）
🛠️ 常用属性
| 属性 | 作用 | 示例 |
|---|---|---|
flex-direction |
设置主轴方向 | row / column |
flex-wrap |
控制元素换行 | nowrap / wrap |
justify-content |
分布项目 | flex-start / center / space-between |
align-items |
垂直对齐 | stretch / baseline |
🎯 实用场景
- 导航栏：
justify-content: space-between保持图标与文字分离 - 卡片布局：
flex-wrap: wrap实现移动端自适应 - 表单组件：
align-items: center美观排列输入框与标签
✅ 示例代码
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border: 2px solid 🟦;
padding: 1rem;
}
🌐 拓展学习
想了解更多进阶技巧？请前往/advanced_layouts学习！