CSS ・ Flexbox・Grid
justify-content
主軸方向の配置
FlexboxやGridで、アイテムを主軸方向（通常は横方向）にどう並べるかを指定します。中央寄せや均等配置に使います。
01
サンプルコード
HTML
1<div class="container">
2 <div class="item">1</div>
3 <div class="item">2</div>
4 <div class="item">3</div>
5</div>
CSS
1.container {
2 display: flex;
3 justify-content: space-between;
4 padding: 12px;
5 border: 1px dashed #999;
6}
7.item {
8 width: 64px;
9 padding: 12px 0;
10 text-align: center;
11 background: #f6ead8;
12}
02
実行結果
ブラウザでの表示
03
解説
justify-content は、子要素ではなく親要素（display: flex を指定したコンテナ）に書きます。
space-between は両端のアイテムをコンテナの端に寄せ、残りの間隔を均等に分けます。center にするとアイテムがまとまって中央に寄ります。
flex-direction: column で縦並びにしたときは、縦方向の配置を決めるプロパティになります。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
flex-start | 先頭（左）に寄せる |
center | 中央に寄せる |
flex-end | 末尾（右）に寄せる |
space-between | 両端に寄せ、間を均等にあける |
space-around | 各アイテムの左右に均等な余白をとる |
space-evenly | すべての間隔を完全に均等にする |
上下左右の中央寄せ
align-items と組み合わせると、要素を縦横どちらも中央に配置できます。
CSS
1.center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5 min-height: 200px;
6}
注意点
- 01子要素に書いても効きません。親のFlexコンテナに指定します。
- 02アイテムがコンテナいっぱいに伸びている場合は、余白がないため変化が見えません。