项目属性

Flex 容器内的直接子元素称为弹性项目，常用项目属性包括：

1. flex-grow

定义项目的放大比例，默认为 0，不放大。

flex-grow: 1;

数值越大，剩余空间分配越多。

2. flex-shrink

定义项目的缩小比例，默认为 1，允许缩小。

flex-shrink: 1;

当空间不足时，数值越大，缩小越多。

3. flex-basis

定义项目在主轴上的初始大小，默认 auto，即项目本来大小。

flex-basis: 100px;

可以设定固定尺寸或百分比。

4. flex

简写属性，结合 flex-grow、flex-shrink 和 flex-basis。

flex: 1 1 100px;

5. order

控制项目的排列顺序，数字越小越靠前，默认 0。

order: 2;

6. align-self

覆盖容器的 align-items，设置单个项目在交叉轴上的对齐方式。

可选值：auto、flex-start、flex-end、center、baseline、stretch。

align-self: center;

Flex 项目属性示例

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