# 项目属性

URL: https://caijiao.org/css/07-flexbox/03-item-properties
Source: docs/css/07-flexbox/03-item-properties.md
Description: Flex 项目属性用于控制弹性盒子子元素的尺寸、顺序和对齐，灵活调整布局效果。

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

## 1. flex-grow

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

```css
flex-grow: 1;
```

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

## 2. flex-shrink

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

```css
flex-shrink: 1;
```

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

## 3. flex-basis

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

```css
flex-basis: 100px;
```

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

## 4. flex

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

```css
flex: 1 1 100px;
```

## 5. order

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

```css
order: 2;
```

## 6. align-self

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

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

```css
align-self: center;
```

## Flex 项目属性示例

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