こんにちは。
CSSでレイアウトを組む時にFlexbox(フレックスボックス)をよく使いますよね。
このFlexboxには、justify-contentというプロパティがあります。justify-contentといえば、水平方向に要素を配置するためのプロパティだと思っている方も多いのではないでしょうか。実は、私もその一人でした。しかし、最近になって、このプロパティが水平方向だけではなく、垂直方向も設定できることを知りました。
この記事では、justify-contentで垂直方向の配置を設定できるという新たな発見を共有したいと思います。
Flexboxの主軸
justify-contentで垂直方向の配置を設定するためには、Flexboxの主軸を理解することが不可欠です。
主軸の説明に関しては、MDNに掲載されておりましたので引用させていただきました。リンク先には、参考画像も掲載されていますので、興味のある方はご覧になってください。
Main Axis (主軸)
flexbox における主軸は、flex-direction プロパティの設定方向によって定義されます。flex-direction が取り得る値は以下の 4 つです。
row
row-reverse
column
column-reverse
row または row-reverse を選んだ場合は、主軸はインライン要素の並ぶ方向に伸びる軸となります。
column または column-reverse を選んだ場合は、ページの上から下に向かってブロック要素の並ぶ方向に伸びる軸となります。
※引用：MDN
上記の通り、主軸はflex-directionプロパティによって、水平方向や垂直方向に設定することができます。
補足になりますが、display:flexの初期状態は、flex-direction:rowです。つまり、要素は水平方向に並びます。
何故justify-contentで垂直方向の配置が設定できるのか
勘のいい方はすでにお気づきかと思いますが、主軸が垂直方向に設定されると、その主軸に沿って、レイアウトを設定することができます。
どういうことか実際にやってみましょう。
以下の例では、主軸を変更することで要素の配置がどのように変化するか表現しています。ボタンを押して変化を確認してみてください。
※初期の主軸は水平方向です。
See the Pen justify-content:space-between 横軸＆縦軸 by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.
※ "Result"ボタンを押すとプレビューが表示されます。解説をしますと…
１．flex-direction:rowボタンを押した時
水平方向にjustify-content: space-betweenが適用される。
２．flex-direction:columnボタンを押した時
垂直方向にjustify-content: space-betweenが適用される。
上記のように主軸に沿って、justify-contentが適用されているのが分かりましたね。これによって、垂直方向のレイアウトが簡単に行うことができます。
まとめ
「justify-content」は、要素を主軸に沿って配置するための便利なプロパティです。私のように、水平方向に要素を配置するためのプロパティと理解している方もいるかと思い、垂直方向でも同様に使えることを紹介しました。
この記事を通して、Flexboxを使った新たなレイアウト法を身に付けることができたのではないでしょうか。引き続き、Webデザインに関する情報を発信していきますので、皆さんの学びに少しでも役に立てば幸いです。
ここまでお読みいただきありがとうございました。