頭脳一式

Categories: HTML&CSS

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

【CSS3】【Flexbox】justify-contentの使い方

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

MEMO

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

左揃えにする：justify-content:flex-start
右揃えにする：justify-content:flex-end
中央揃えにする：justify-content:center
両端揃えにする：justify-content:space-between
均等揃えにする（両端の要素の間隔は半分）：justify-content:space-around
均等揃えにする（間隔も均等）：justify-content:space-evenly
まとめ

目次へ

左揃えにする：`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;
}