# justify-self

> Grid子要素が個別に横方向（インライン軸）の配置を指定するプロパティです。Flexboxでは効果がない点に注意。

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

## 構文

```css
justify-self: auto | start | end | center | stretch
```

## Tailwindでは

- `justify-self-start` → justify-self: start
- `justify-self-center` → justify-self: center
- `justify-self-stretch` → justify-self: stretch

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 57+ / Firefox 45+ / Safari 10.1+ / Edge 16+

## コード例

### 例1: セルの開始位置に配置

```css
justify-self: start;
```

### 例2: セルの中央に配置

```css
justify-self: center;
```

### 例3: セルの終了位置に配置

```css
justify-self: end;
```

## TIPS

Grid Layoutで個別のアイテムを配置する際に使用。Flexboxでは動作しない点に注意（Flexboxではmargin: autoを使う）。

## よくある間違い

Flexboxでは効かない！Grid専用。justify-itemsとの違いを理解する（親 vs 子）。

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

justify-selfはgrid（とブロック）用で、flexアイテムには効きません——flexで「自分だけ右へ」はmargin-left: auto（margin-inline-start: auto）が定石です。この振り分けはAIも間違えるポイントで、「gridならjustify-self、flexならauto margin」と覚えるのが確実です。

## AIへの依頼文例

- ヘッダーの最後のボタンだけ右端に寄せたい。flexとgridそれぞれでの正しい書き方を示して

## 関連プロパティ

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