# place-content

> align-contentとjustify-contentを一括で設定するショートハンドプロパティです。

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

## 構文

```css
place-content: <align-content> <justify-content>
```

## Tailwindでは

- `place-content-center` → place-content: center
- `place-content-between` → place-content: space-between

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 59+ / Firefox 45+ / Safari 9+ / Edge 79+

## コード例

### 例1: フレックスコンテンツを中央配置

```css
.flex-container {
  display: flex;
  flex-wrap: wrap;
  place-content: center;
}
```

### 例2: 垂直方向は均等配置、水平方向は中央配置

```css
place-content: space-between center;
```

## TIPS

複数行のFlexboxやGridで威力を発揮。

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

place-itemsが「各セル内のアイテム」の配置なのに対し、place-contentは「トラック群全体」の配置です。AIはこの2つを混同した説明をよくします。コンテンツ全体をコンテナ中央に置くのがplace-content、各セルの中でアイテムを中央に置くのがplace-itemsです。

## AIへの依頼文例

- gridでトラック全体をコンテナ中央に配置したい。place-contentとplace-itemsの違いを踏まえて書いて

## 関連プロパティ

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