【8/27まで】Udemyの人気コースが今なら1,200円から!!

【Flexbox】justify-contentの使い方

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

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

子要素を左揃えにする:justify-content:flex-start

子要素を左揃えにするための大事なポイント
  • 親要素に以下を設定する。
    • display:flex;
    • justify-content:flex-start;
  • 子要素には何も設定しない。

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

CSS

.parent {
  height:400px;
  width: 400px;
  background-color:lime;
  display:flex;/* ここは子要素divの位置を決めるための指定*/
  justify-content:flex-start;/* 水平方向の指定*/
}
.child {

}
.content{
  height:100px;
  width: 100px;
  border:solid 1px;
  background-color:pink;
}

子要素を右揃えにする:justify-content:flex-end

子要素を右揃えにするための大事なポイント
  • 親要素に以下を設定する。
    • display:flex;
    • justify-content:flex-end;
  • 子要素には何も設定しない。

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

CSS

.parent {
  height:400px;
  width: 400px;
  background-color:lime;
  display:flex;/* ここは子要素divの位置を決めるための指定*/
  justify-content:flex-end;/* 水平方向の指定*/
}
.child {

}
.content{
  height:100px;
  width: 100px;
  border:solid 1px;
  background-color:pink;
}

子要素を中央揃えにする:justify-content:center

子要素を中央揃えにするための大事なポイント
  • 親要素に以下を設定する。
    • display:flex;
    • justify-content:center;
  • 子要素には何も設定しない。

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

CSS

.parent {
  height:400px;
  width: 400px;
  background-color:lime;
  display:flex;/* ここは子要素divの位置を決めるための指定*/
  justify-content:center;/* 水平方向の指定*/
}
.child {

}
.content{
  height:100px;
  width: 100px;
  border:solid 1px;
  background-color:pink;
}

子要素を均等割り付けにする:justify-content:space-around

子要素を均等割り付けにするための大事なポイント
  • 親要素に以下を設定する。
    • display:flex;
    • justify-content:space-around;
  • 子要素には何も設定しない。

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

CSS

.parent {
  height:400px;
  width: 400px;
  background-color:lime;
  display:flex;/* ここは子要素divの位置を決めるための指定*/
  justify-content:space-around;/* 水平方向の指定*/
}
.child {

}
.content{
  height:100px;
  width: 100px;
  border:solid 1px;
  background-color:pink;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です