# CSS flex 参考

URL: https://caijiao.org/reference/css/flex
Source: docs/reference/css/flex.md
Description: CSS flex Reference，整理 display:flex、flex-direction、justify-content、align-items、gap、flex-wrap、可运行演示和常见错误。

Flexbox 是一维布局模型，适合把元素沿主轴排列，例如导航、按钮组、表单行、卡片内部内容。

## 语法

```css
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
```

## 常用属性

| 属性 | 作用位置 | 说明 |
| --- | --- | --- |
| `display: flex` | 容器 | 启用 Flexbox |
| `flex-direction` | 容器 | 主轴方向 |
| `justify-content` | 容器 | 主轴对齐 |
| `align-items` | 容器 | 交叉轴对齐 |
| `gap` | 容器 | 项目间距 |
| `flex-wrap` | 容器 | 是否换行 |
| `flex` | 项目 | 伸缩比例和基础尺寸 |

## 可运行演示

[在线代码演示](/reference/css/demos/flex-toolbar.html)

## 常见错误

- 把二维布局强行写成多层 flex，复杂卡片列表更适合 Grid。
- 忘记 `min-width: 0`，导致 flex 子项中的长文本无法收缩。
- `justify-content` 和 `align-items` 方向混淆，先确认主轴方向。

## 相关内容

- [CSS Reference](/reference/css/)
- [CSS Flexbox 教程](/css/07-flexbox/01-flex-container-item)
- [grid 参考](/reference/css/grid)
- [MDN flexbox](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox)