Categories: HTML&CSS

【Flexbox】要素を水平方向に揃える「justify-content」の使い方

要素の位置を左、右、中央のように水平方向に指定したい場合はjustify-contentを使用します。

MEMO

justify-contentはフレックスボックスだけでなくグリッドレイアウトにも使用できます。

左揃えにする:justify-content:flex-start

justify-content:flex-startを指定すると左揃えにできます。

左揃えにするための大事なポイント

親要素に以下を設定する。
  • display:flex;
  • justify-content:flex-start;

See the Pen
justify-content1
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="container1">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

CSS

#container1{
  display:flex;
  justify-content:flex-start;
  height:50px;
  width:180px;
  border: 1px black solid;
}

#container1 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

右揃えにする:justify-content:flex-end

justify-content:flex-endを指定すると右揃えにできます。

右揃えにするための大事なポイント

親要素に以下を設定する。
  • display:flex;
  • justify-content:flex-end;

See the Pen
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="container2">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

CSS

#container2{
  display:flex;
  justify-content:flex-end;
  height:50px;
  width:180px;
  border: 1px black solid;
}

#container2 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

中央揃えにする:justify-content:center

justify-content:centerを指定すると中央揃えにできます。

中央揃えにするための大事なポイント

親要素に以下を設定する。
  • display:flex;
  • justify-content:center;

See the Pen
justify-content3
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="container3">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

CSS

#container3{
  display:flex;
  justify-content:center;
  height:50px;
  width:180px;
  border: 1px black solid;
}

#container3 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

両端揃えにする:justify-content:space-between

justify-content:space-betweenを指定すると両端揃えにできます。
間にある要素は、間隔を開けて均等揃えになります。

大事なポイント

親要素に以下を設定する。
  • display:flex;
  • justify-content:space-between;

See the Pen
justify-content4
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="container4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

CSS

#container4{
  display:flex;
  justify-content:space-between;
  height:50px;
  width:180px;
  border: 1px black solid;
}

#container4 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

均等揃えにする(両端の要素の間隔は半分):justify-content:space-around

justify-content:space-aroundを指定すると最初と最後の要素も含めて均等揃えになります。
このとき、両端の間隔の大きさは、残りの要素の間隔の大きさの半分になります。

子要素を均等割り付けにするための大事なポイント

親要素に以下を設定する。
  • display:flex;
  • justify-content:space-around;

See the Pen
ustify-content5
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="container5">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

CSS

#container5{
  display:flex;
  justify-content:space-around;
  height:50px;
  width:180px;
  border: 1px black solid;
}

#container5 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

均等揃えにする(間隔も均等):justify-content:space-evenly

justify-content:space-evenlyを指定すると間隔の大きさも均等に、均等揃えになります。

See the Pen
justify-content6
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="container6">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

CSS

#container6{
  display:flex;
  justify-content:space-evenly;
  height:50px;
  width:180px;
  border: 1px black solid;
}

#container6 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

まとめ

See the Pen
justify-content-all
by shiakisudev (@shiakisu)
on CodePen.


以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp