# align-self

> FlexboxやGridの子要素が個別に縦方向（交差軸）の配置を上書きするプロパティです。親のalign-itemsを上書きし、特定のアイテムだけ異なる配置を実現できます。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/align-self/

## 構文

```css
align-self: auto | flex-start | flex-end | center | baseline | stretch
```

## Tailwindでは

- `self-start` → align-self: flex-start
- `self-center` → align-self: center
- `self-end` → align-self: flex-end
- `self-stretch` → align-self: stretch

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 29+ / Firefox 20+ / Safari 9+ / Edge 12+

## コード例

### 例1: 交差軸の開始位置に配置

```css
align-self: flex-start;
```

### 例2: 交差軸の終了位置に配置

```css
align-self: flex-end;
```

### 例3: 交差軸方向に伸縮（デフォルト）

```css
align-self: stretch;
```

## TIPS

親のalign-itemsを個別の子要素で上書きできる。1つだけ異なる配置にしたい時に便利。

## よくある間違い

親がFlexboxまたはGridでないと効果がない。align-itemsとの違いを理解する（親 vs 子）。

## AIがよく間違えるポイント

コンテナのalign-items（全員）に対する個別上書きがalign-self（自分だけ）です。AIは「1つだけ配置を変えたい」場面でコンテナ側をいじる遠回りをすることがあります。flexの交差軸・gridのブロック軸という対象軸の違い、stretchを解除して固有サイズに戻す用途も押さえておくと便利です。

## AIへの依頼文例

- flexの並びの中で1つのボタンだけ下端に揃えたい。align-selfで書いて

## 関連プロパティ

- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [justify-self](https://www.css-dictionary.com/property/justify-self.md)
- [flex-direction](https://www.css-dictionary.com/property/flex-direction.md)