【CSS】display: flexで上下左右中央揃えや、右寄せなど要素毎に配置を変更する方法｜フレックスボックス(flexbox)全体や親要素の縦横配置指定の実例

CSSではレスポンシブでページを作成するときにもはや欠かせない存在となっている「フレックスボックス(flexbox)」（display: flex;）があります。

display: flexを設定している要素自体や、その中にある要素を上下（縦・垂直）方向や左右（横・水平）方向に配置を移動したいときがあります。

そういったときは、フレックスボックス(flexbox)専用のプロパティを使って配置を指定する必要があります。

ここでは、「フレックスボックス(flexbox)」（display: flex;）で親要素自体や、中の要素の配置を指定する方法を実例で解説しています。

使えるプロパティの一覧
実際：デフォルトの状態
中の要素の位置の調整
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｜縦（上下）方向のコンテナの位置を調整する
参考リンク

使えるプロパティの一覧

display: flexを指定したときに要素の配置を指定することができるプロパティには以下の6コがあります。

align-items
align-self
align-content
justify-items
justify-self
justify-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;
}
/*以降の各ボックスの色は割愛*/

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

プロパティの適用大分類