Flexbox（弹性盒模型）是CSS中实现灵活布局的强大工具，常用于响应式设计和元素对齐。以下是核心知识点：

💡 基本概念

  • 弹性容器：通过 display: flex 定义，自动创建弹性子元素
  • 主轴方向：默认水平方向（row），可通过 flex-direction 改为垂直（column）
  • 空间分配：flex-grow（扩展）、flex-shrink（收缩）、flex-basis（基础尺寸）

📊 常见属性

属性 说明 示例
justify-content 控制主轴对齐 center / space-between
align-items 控制交叉轴对齐 flex-start / stretch
flex-wrap 是否换行 wrap / nowrap
gap 子元素间距 gap: 10px

📌 典型应用场景

  1. 导航栏布局 
    nav {
  display: flex;
  justify-content: space-between;
}
  2. 卡片式组件 
    .card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
  3. 响应式图片墙 
    .gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}

📌 扩展阅读

flexbox_ji_chu

🚀 实战技巧

  • 使用 align-content 控制多行对齐
  • 结合 order 实现子元素排序
  • 通过 flex 简写属性快速设置比例
flexbox_shi_yong

📌 注意事项

  • 避免过度使用，保持布局可维护性
  • 优先使用 flex-wrap 代替固定宽度
  • 浏览器兼容性需注意（现代浏览器支持良好）

了解更多Flexbox进阶用法