Flex 容器与项目

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

1. Flex 容器

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

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 容器与项目示例

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。