CSS Flexbox 布局指南 📌

Flexbox（弹性盒子）是 CSS 中实现灵活布局的强大工具，适用于一维布局场景。以下是关键知识点：

核心概念 🧱

• 容器属性
  display: flex | 定义 Flexbox 容器
  flex-direction: row/column | 设置主轴方向
  justify-content: flex-start/center/space-between | 控制子元素在主轴上的对齐方式
  align-items: stretch/center/space-around | 控制子元素在交叉轴上的对齐方式

flexbox container

常见使用场景 🎯

• 响应式导航栏
  子元素自动填充空间，适应不同屏幕尺寸
• 卡片式布局
  灵活排列内容模块，支持换行与间距控制
• 表单元素对齐
  精准控制输入框与标签的间距和排列

flex direction

示例代码 💻

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}

flexbox example

注意事项 ⚠️

• 避免子元素宽度总和超过容器，可能导致溢出
• 使用 flex-wrap: wrap 时注意子元素的 flex-basis 设置
• 交叉轴对齐需结合 align-items 和 align-content 使用

align items

如需深入了解 CSS Grid 布局，可访问 /design/css-grid-layout 进行对比学习。