今回はFlexBoxで横並びされた要素の縦軸の位置調整を、初心者向けに解説します。
以下のように要素を横並びにしたソースコードを準備しました。
See the Pen OJVrzOG by PakuPaku (@PakuPaku) on CodePen.
✅div要素でブロックを５つ生成・・・親要素のclass名はcontents／子要素のclass名はbox1~4
✅親要素は600pxの正方形に指定
✅各子要素は100pxの正方形に指定
✅FlexBoxで要素を横並べ
縦軸の位置調整（align-itemsプロパティ）の使い方
以前解説した主軸と交差軸は覚えていますか？
今回は横並びにした要素の縦位置を調整したいわけです。
ということは、交差軸を調整するプロパティが必要なわけですね。
justify-contentプロパティは主軸の位置を調整する為に使用しましたね。
そして交差軸に対しての指定にはalign-itemsプロパティを使用します。
それでは早速『align-itemsプロパティ』で使える値について紹介します。
align-itemsプロパティで指定できる値は以下の５つになります。
✅stretch・・・・・親要素の高さ
✅flex-start・・・上揃え
✅flex-end・・・・下揃え
✅center・・・・・中央揃え
✅baseline・・・・ベースラインで揃える
そしてalign-itemsプロパティを使う時はFlexアイテムとなる親要素へ記述します。
今回の場合は『box1~4』がFlexアイテムで、その親要素は『contents』となります。
CSS
.contents{
width: 600px;
height: 600px;
background-color: antiquewhite;
display: flex;
align-items: ○○○○○;
{
○○○○○の部分に値が入るわけですね👀
そうだよ🍎
大分わかってきたね✨
stretchで指定してみる
『stretch』は親要素の高さに揃える値となります。
See the Pen xxGmYXm by PakuPaku (@PakuPaku) on CodePen.
ブラウザ上での変化は見られませんね。
これは『stretch』がalign-itemsプロパティの初期値であることに起因します。
ここで①と③のFlexアイテムの高さ指定を外してみましょう。
See the Pen poJqaLp by PakuPaku (@PakuPaku) on CodePen.
①と③のFlexアイテムは親要素の上揃えとなり、高さは親要素一杯に広がっている事が分かります。
これが、『align-itemsプロパティ』初期値の挙動となります。
flex-startで指定してみる
『flex-start』はflexアイテムはflexコンテナのクロス軸の始点に配置する値です。
See the Pen ExjGJrb by PakuPaku (@PakuPaku) on CodePen.
『stretch』と同様にブラウザ上での変化は見られませんね。
しかし、こちらも①と③のFlexアイテムの高さ指定を外してみると違いが見えてきます。
See the Pen JjdwVVL by PakuPaku (@PakuPaku) on CodePen.
『stretch』のように①と③の要素は、親要素の高さに広がることはありませんね。
本来のブロック要素の動きと同じように、高さを指定していない為、文字の高さになっています。
そしてflexアイテムはflexコンテナのクロス軸の始点に配置されています。
flex-endを指定してみる
『flex-end』はflexアイテムはflexコンテナのクロス軸の終点に配置する値です。
See the Pen bGdOybd by PakuPaku (@PakuPaku) on CodePen.
親要素の下に配置された事が確認できますね。
それでは①と③の要素の高さ指定を外すとどうなるか見てみましょう。
See the Pen mdJaYbY by PakuPaku (@PakuPaku) on CodePen.
①と③の要素は文字の高さになり、全ての子要素が下揃えになっていますね。
centerで指定してみる
『center』はflexアイテムはflexコンテナのクロス軸の中央に配置する値です。
See the Pen GRJPaJV by PakuPaku (@PakuPaku) on CodePen.
要素が上下中央揃えになっている事が確認できます。
それでは①と③の要素の高さ指定を外してみましょう。
See the Pen bGdOyEE by PakuPaku (@PakuPaku) on CodePen.
①と③の要素は文字の高さになり、全ての子要素が上下中央揃えになっていますね。
baselineで指定してみる
『baseline』はflexアイテムをベースラインに沿って配置する値です。
See the Pen XWbowRq by PakuPaku (@PakuPaku) on CodePen.
『stretch』と同様にブラウザ上での変化は見られませんね。
では①と③の要素の高さの指定を外してみましょう。
See the Pen MWwZdoO by PakuPaku (@PakuPaku) on CodePen.
『flex-start』と同様の挙動しか見られません。
そこで、HTMLの『box1』を『H1』に『box2』を『H2』そして『box3』を『H3』と指定してみましょう。
See the Pen XWbowaq by PakuPaku (@PakuPaku) on CodePen.
あっ❗️要素が少しづつずれた👀
この時、どのような事が起こっているのか解説しますね。
これは文字の大きさに依存しているからです。
そもそもbaselineとは文字の下に定義されているラインの事です。
なので今回のケースだと、①〜④のベースラインに沿って揃えられたと解説すると分かりやすいのではないかと思います。
まとめ
FlexBoxで横並べした要素を縦に位置調整を行うには以上の５つの方法が基本となります。
今回のように色々と試してみましょう。
試しているうちに使いこなせるようになると思います。
