【CSS】align-items, align-self, align-content, justify-items, justify-self, justify-contentは何が違うのか？使い方実例（display: flexやgridの要素の位置調整まとめ・一覧）

CSSで要素を横並びにしたり、等間隔で表示する処理にdisplay: flex;やdisplay: grid;があります。

これらの処理の中で要素の位置を調整するときに、「align」がつくプロパティと「justify」がつくプロパティが非常にたくさんでてきます。

ここでは、それぞれがどういった働きをしていて、いつどのように使えばいいかについてまとめています。

alingとjustifyのプロパティ一覧と概要
1. align-系
2. justify-系
まとめ表
実際：デフォルトの状態
中の要素の位置の調整
align-items｜全ての要素の縦(上下)方向の位置調整
1. align-items: center;
2. align-items: end;
align-self｜指定した要素の縦(上下)方向の位置調整
1. align-self: center;
2. align-self: end;
justify-items｜全ての要素の横(左右)方向の位置調整
1. justify-items: center;
2. justify-items: end;
justify-self｜指定した要素の横(左右)方向の位置調整
1. justify-self: center;
2. justify-self: end;
親要素（コンテナ自体）の位置調整
justify-content｜横（左右）方向のコンテナの位置を調整する
align-content｜縦（上下）方向のコンテナの位置を調整する
参考リンク

alingとjustifyのプロパティ一覧と概要

align-系

alignがつくプロパティには以下の３つがあります。

align-items
align-self
align-content

justify-系

justifyがつくプロパティには以下の３つがあります。

justify-items
justify-self
justify-content

point

たくさんあるように見えますが、どちらも3種類づつで、末尾につくのは、次の3種類だけです（計6種類）。

items
self
content

これらの接頭語と接尾語によって一定の処理が加わります。

まとめ表

接頭語「align」と「justify」、接尾語「items」「self」「content」で分類して機能をまとめると以下のようになります。

接頭語による違い

prefix	機能
align-	上下（垂直）方向の調整
justify-	左右（水平）方向の調整

接尾語による違い

suffix	対象要素	機能
-items	全ての要素	中のすべての要素の位置を調整する
-self	子	指定した個別の要素の位置を調整する
-content	親	親（外枠）の位置を調整する

プロパティと使える主な値

それぞれのプロパティには、「center」「start」「left」「right」などの値が用意されています。

プロパティによって使えるものが異なるので注意が必要です。

各プロパティと使える値をまとめると以下のようになります。

値	align-items	align-self	align-content	justify-items	justify-self	justify-content
center	✔︎	✔︎	✔︎	✔︎	✔︎	✔︎
start (flex-start)	✔︎	✔︎	✔︎	✔︎	✔︎	✔︎
end (flex-end)	✔︎	✔︎	✔︎	✔︎	✔︎	✔︎
stretch	✔︎	–	✔︎	✔︎	✔︎	✔︎
left	–	–	–	✔︎	✔︎	✔︎
right	–	–	–	✔︎	✔︎	✔︎
auto	–	✔︎	–	✔︎	✔︎	–
space-between	–	–	✔︎	–	–	✔︎
space-around	–	–	✔︎	–	–	✔︎
space-evenly	–	–	✔︎	–	–	✔︎

space-系の処理

値の中でもプロパティ「align-content」と「justify-content」につく、space～という記述が他の値と比較して直感的に分かりずらいです。

これらは、displayのflexやgrid専用の値ですが、中の要素の間隔を自動調整してくれるとても便利なものです。

値	外側の余白	機能
space-between	なし	要素間に均等なマージンを設定。
space-evenly	要素間の余白と等しい	外側と要素間に均等な余白を設定。
space-around	要素間の余白の半分	外側と要素間に余白を設定。ただし、外側は要素間の半分の余白とする。

leftとright

leftとrightは直感的にわかりやすい値ですが、これが使えるのはjustify系のみです。

かつ、「left」はstartやflex-startと同じ。「right」はendやflex-endと同じです。

実際：デフォルトの状態

以下では参考として、display: grid（グリッドシステム）指定した要素に対して、各プロパティを適用したときの動き方を実例で紹介してます。

もちろん、「display: flex」で指定している要素に対しても使えますのでご安心ください。

合わせて読みたい

display: grid（グリッドシステム）を使うと要素の位置や幅・高さなどをマス目に合わせて指定することができます。オシャレなレスポンシブのサイトを作成するには欠かせない機能です。

詳細については下記をご参考ください。

【CSS】グリッドシステム(grid system, display: grid;)とは何か？要素の長さや位置の調整方法を実例で解説

デフォルトとして以下のように、100px四方の８個のグリッド内に50pxの四角形を配置したものを用意しています。

  <div class="grid-wrapper">
    <div class="box--blue">1</div>
    <div class="box--yellow">2</div>
    <div class="box--green">3</div>
    <div class="box--red">4</div>
    <div class="box--cyan">5</div>
    <div class="box--gray">6</div>
    <div class="box--pink">7</div>
    <div class="box--purple">8</div>
  </div>

.grid-wrapper{
  text-align: center;
  font-size: 30px;
  height: 400px;   /*-contentの確認時のみ*/
  width: 700px;   /*-contentの確認時のみ*/
  border: double 4px gray;　/*-contentの確認時のみ*/

  /*grid system*/
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 20px;
}

div > div{
  width: 50px;
  height: 50px;
}

.box--blue{
  background-color: blue;
}
/*以降の各ボックスの色は割愛*/

プロパティの適用は大きく以下の２つに分かれます。

プロパティの適用大分類