Flexbox（弹性盒子）是 CSS 中实现灵活布局的核心模块，专为一维布局设计，能轻松应对复杂排版需求。以下是关键知识点：

⚡️ 核心概念

  • flex-direction
    定义主轴方向：row（默认，水平排列）或 column（垂直排列）

    flex_direction_row

  • justify-content
    控制主轴对齐方式：

    • flex-start（默认，左对齐）
    • flex-end（右对齐）
    • center（居中）
    • space-between（两端对齐，中间间隔）
    • space-around（均匀分布，两侧间隔）
    justify_content_space_between

  • align-items
    设置侧轴对齐方式：

    • stretch（默认，拉伸子元素）
    • flex-start / flex-end（顶部/底部对齐）
    • center（垂直居中）
    • baseline（基线对齐）
    align_items_center

📌 常见用法

  1. 基础布局 

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

  2. 响应式设计
    使用 flex-wrap: wrap 实现换行，结合 flex-grow 分配空间

    flex_wrap_wrap

  3. 嵌套布局
    子元素可通过 align-self 覆盖父容器的 align-items 设置

    align_self_center

📘 扩展阅读

想深入了解二维布局？可参考 CSS Grid 布局教程 获取更多技巧 🚀

📌 提示：Flexbox 适用于需要灵活调整元素间距和对齐的场景，但复杂三维布局建议使用 CSS Grid。