コンテナに使用するFlexboxのプロパティ

justify-content: 水平方向の位置

justify-content は、「水平方向の位置を指定するプロパティ」です。

justify-content で用意されている値を使って、それぞれの反映結果を実例で見ながら、各値の違いを学んでいきましょう。

justify-content: flex-start;

先ほどの flex-wrap で見た、ミュージック ストリーミングアプリの実例を使います。

flex-start を値に、 justify-content を実装してみます。

/* ...その他スタイルは割愛 */

.album-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;/* flex-startを値に指定 */
}

反映に変化はありませんね。

これは、 flex-start の値が、デフォルトの値だからです。

デフォルトは左揃えで並ぶので、 justify-content を指定しない場合は、自動で flex-start の値が、付与されているということになります。

この実例は、marginやpaddingで、ある程度整っている部分もありますが、よく見ると、コンテンツも若干左寄りですね。

justify-content: flex-end;

flex-end は、アイテム要素を右に寄せます。

先ほどの実例の値を、 flex-end に変えて見てみましょう。

/* ...その他スタイルは割愛 */

.album-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;/* flex-endを値に指定 */
}

アイテム要素が、全体的に右に寄りましたね。

justify-content: center;

center は、アイテムを左右中央揃えで配置します。

先ほどの実例の値を、 center に変えて見てみましょう。

/* ...その他スタイルは割愛 */

.album-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* centerを値に指定 */
}

アイテム要素が、中央配置に変化しました。

justify-content: space-between;

space-between は、両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔をあけて配置します。

先ほどの実例の値を、 space-between に変えて見てみましょう。

/* ...その他スタイルは割愛 */

.album-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;/* space-betweenを値に指定 */
}

アイテム要素が、均等にスペースをあけて配置されていますね。

この実例自体には、全体の左右にmarginが入っているので、左右が空いている様に見えますが、dev toolで確認をすると、アイテム自体にあらかじめついているmargin以外、両端のアイテムの画面端にはスペースがないことが確認できます。

画面下の要素では、 space-between の効果が顕著です。

justify-content: space-around;

space-around は、両端のアイテムも含めて、均等な間隔をあけて配置します。

先ほどの実例の値を、 space-around に変えて見てみましょう。

/* ...その他スタイルは割愛 */

.album-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;/* space-aroundを値に指定 */
}

この実例自体には、全体の左右にmarginが入っているので、左右のスペースについて変化がない様に見えますが、dev toolで確認をすると、両端のアイテムの画面端にも、さらにスペースがあることが確認できます。

こちらも、画面下の要素では、特に space-around の効果が顕著です。

justify-content の、値の一覧は以下です。