🎉 Flexbox 是 CSS3 引入的灵活布局模块，能轻松实现复杂页面排列。掌握它可大幅提升布局效率！

🧠 核心概念

  • 弹性容器：通过 display: flex 定义，自动创建弹性子元素
  • 主轴方向：flex-direction 控制排列方向（默认横向）
  • 对齐方式：justify-content（水平） + align-items（垂直）组合使用
  • 响应式设计：通过 flex-wrap 实现换行布局

🛠️ 快速上手

.container {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
}

📌 常用属性详解

属性 作用 示例
flex-direction 定义主轴方向 row（默认） / column
flex-wrap 控制换行 nowrap（默认） / wrap
justify-content 水平对齐 flex-start / center / space-around
align-items 垂直对齐 stretch（默认） / flex-end

🖼️ 视觉示例

flexbox_layout

🌐 扩展阅读

想要深入学习 CSS Grid 布局？👉 CSS Grid 入门指南

⚠️ 注意事项

  • 避免在容器和子元素中混用 float 或 position: absolute
  • 使用 flex-grow 实现动态空间分配
  • 响应式布局建议配合媒体查询使用
flexbox_direction