html交叉轴排列,10-flex 项目交叉轴单独对齐

# flex 项目交叉轴单独对齐

## 1. `align-self`属性

- 该属性可覆盖容器的`align-items`, 用以自定义某个项目的对齐方式

| 序号 | 属性值 | 描述 |

| ---- | ------------ | ------------------------------ |

| 1 | `auto`默认值 | 继承 `align-items` 属性值 |

| 2 | `flex-start` | 与交叉轴起始线对齐 |

| 3 | `flex-end` | 与交叉轴终止线对齐 |

| 4 | `center` | 与交叉轴中间线对齐: 居中对齐 |

| 5 | `stretch` | 在交叉轴方向上拉伸 |

| 6 | `baseline` | 与基线对齐(与内容相关用得极少) |

---

## 示例


```html

flex 项目交叉轴排单独对齐

/* 容器尺寸 */

.container {

width: 300px;

height: 150px;

}

/* flex容器 */

.container {

display: flex;

}

/* flex项目 */

.item {

width: 50px;

height: 50px;

background-color: lightcyan;

font-size: 1.5rem;

/* align-self默认值 */

align-self: auto;

}

/* 自定义项目对齐方式 */

.item:first-of-type {

background-color: lightgreen;

/* 项目与容器等高, 否则看到不拉伸效果 */

height: inherit;

/* 项目拉伸以适应容器 */

align-self: stretch;

}

.item:nth-of-type(2) {

background-color: yellow;

/* 项目对齐到容器起始线*/

/*看不到效果是因为容器的`align-itmes默认就是flex-start */

align-self: flex-start;

}

.item:nth-of-type(3) {

background-color: pink;

/* 项目对齐到容器交叉轴终止线 */

align-self: flex-end;

}

.item:last-of-type {

background-color: lightskyblue;

/* 项目对齐到容器交叉轴中间线 */

align-self: center;

}

1

2

3

4

```