📌 Flexbox 布局详解

Flexbox（弹性盒子）是 CSS 中用于布局的模块，通过简单的属性配置即可实现灵活的元素排列。它特别适合处理需要响应式设计的场景，比如导航栏、卡片布局等。

✅ 核心特性

• 自动对齐：通过 justify-content 和 align-items 控制主轴与交叉轴对齐方式
• 伸缩性：flex-grow、flex-shrink 和 flex-basis 实现元素的动态扩展/收缩
• 方向控制：flex-direction 设置排列方向（行/列）
• 换行机制：flex-wrap 控制元素是否换行

🧠 使用场景

• 简单的响应式导航栏
• 需要等高布局的卡片组
• 动态调整内容的仪表盘
• 多列布局的统计信息

🖥 示例代码

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}

.item {
  flex: 1;
  margin: 0 10px;
}

📚 扩展阅读

想深入了解 Flexbox 的进阶技巧？可以阅读 flexbox_教程 页面，包含实战案例与常见问题解决方案。