CSS Flexbox 实战指南 📚

Flexbox（弹性盒子）是CSS中用于布局的强有力工具，能快速实现响应式设计。以下是最常用的用法与技巧：

1. 核心概念 🧠

• 容器属性

  .container {
    display: flex; /* 启用Flexbox布局 */
    flex-direction: row; /* 主轴方向（默认） */
    justify-content: space-between; /* 主轴对齐方式 */
    align-items: center; /* 交叉轴对齐方式 */
  }
  

• 项目属性

  .item {
    flex: 1; /* 自动扩展以填充空间 */
    margin: 10px; /* 可选：调整间距 */
  }
  

2. 常见场景 📱

• 导航栏

  nav {
    display: flex;
    justify-content: space-around; /* 均匀分布子元素 */
  }
  

• 响应式卡片布局

  .card-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 项目间间距 */
  }
  

3. 高级技巧 🔧

• 比例分配

  .item {
    flex: 2 1 200px; /* 基础值、增长系数、最小/最大宽度 */
  }
  

• 对齐优化

  .container {
    align-items: stretch; /* 项目拉伸以填充容器 */
    align-content: flex-start; /* 多行对齐方式 */
  }
  

4. 扩展阅读 📚

• 想深入了解Flexbox原理？可参考flexbox_教程
• 对比Flexbox与Grid布局？查看grid_系统