# Flex 容器与项目

URL: https://caijiao.org/css/07-flexbox/01-flex-container-item
Source: docs/css/07-flexbox/01-flex-container-item.md
Description: Flexbox 是一种用于一维布局的强大 CSS 布局模型，通过设置容器和项目的属性，实现灵活且高效的排版。

Flexbox（弹性盒子）是一种一维布局模型，能够轻松实现元素的对齐、分布和顺序控制。

## 1. Flex 容器

通过给父元素设置 `display: flex;` 或 `display: inline-flex;`，将其变为弹性容器。

```css
display: flex;
```

### 常用容器属性

- `flex-direction`: 定义主轴方向（row、column、row-reverse、column-reverse）。
- `justify-content`: 沿主轴对齐方式（flex-start、center、space-between 等）。
- `align-items`: 沿侧轴对齐方式（flex-start、center、stretch 等）。
- `flex-wrap`: 是否换行（nowrap、wrap、wrap-reverse）。

## 2. Flex 项目

弹性容器内的直接子元素称为弹性项目，可以单独设置：

- `flex-grow`: 放大比例，默认 0。
- `flex-shrink`: 缩小比例，默认 1。
- `flex-basis`: 初始大小，默认 auto。
- `order`: 控制显示顺序，默认 0。
- `align-self`: 单个项目的侧轴对齐方式，覆盖容器的 `align-items`。

---

## Flex 容器与项目示例

[在线代码演示](/css/demos/15.html)