今回は、flexを使って最後の要素を下揃えにする方法について解説します。
頻出レイアウトなので、確実に実装できるようにしましょう！
コンテンツ
flexアイテムの最後の子要素を下揃えにする方法
実装サンプル
See the Pen
flex-grow1 by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.
こちらが実装サンプルです。
ソースを表示したい場合はタブをクリックしてください。
スクロールしてみるとボタンが下揃えになっていることが分かります。
こちらのサンプルの解説をしていきます。
Step1｜flexの指定
まず最初に、flexアイテムに下記コードを記述します。
ul.card-list li {
display: flex;
flex-direction: column;
}
flex-directionは、flexコンテナ内でflexアイテムの並べ方を指定するプロパティです。
値にcolumnを指定すると、flexアイテムを縦に並べてくれます。
Step2｜最後の要素を下揃えに
この後は２パターンの方法が存在します。
①margin-top: auto;の使用
まずは一般的な方法から。
flexアイテムの最後の子要素に下記コードを記述します。
今回、最後の要素に該当するのは「a.button」です。
a.button {
margin-top: auto;
}
こちらを指定することにより、ボタンを下揃えにすることができます。
②flex-grow: 1;の使用
そして2パターン目は、flex-growプロパティを使用する方法です。
flex-growとは、flexコンテナに余白がある場合、その余白をflexアイテムに分配するプロパティです。
今回は「p.text」に指定することで、本来はボタン下にある余白を、テキスト下部に分配（移動）することができます。
p.text {
flex-grow: 1;
}
flexアイテムの孫要素を下揃えにする方法
実装サンプル
See the Pen
flex-grow by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.
こちらのサンプルは、一番上の子要素にはpaddingを適用せず、幅いっぱいに表示する際のサンプルです。例えば画像を入れる時、その周りに余白を入れないことが多いと思います。
したがって、真ん中のテキストとボタンをdivタグで囲み、そのdivタグに対してpaddingを指定して余白を入れています。
このサンプルではmargin-top: auto;を使用していますが、flex-growを使用するパターンでも問題ありません。
うまくいかない事例
上記サンプルのように、flexアイテムの孫要素を下揃えにしたいときがあります。
この場合、孫要素の親要素「div.bottom」と孫要素であるボタン「a.button」それぞれに対して、下記を指定するだけでは下揃えにはなりません。
div.bottom {
display: flex;
flex-direction: column;
}
a.button {
margin-top: auto;
}
ではどうするべきか。
解決法
それぞれのタグに下記コードを記述すると、ボタンが下揃えに表示されます。
ul.card-list li {
display: flex;
flex-direction: column;
}
div.bottom {
flex-grow: 1;
}
flex-grow: 1;を指定することで、「div.bottom」の下にある余白をそのままflexアイテムの「div.bottom」に分配します。
これにより、ボタンを下揃えにすることができます。
まとめ｜flexで最後の要素を下揃えに配置する方法
以上、flexを使用して最後の要素を下揃えにする方法について解説しました。
今回のようなレイアウトパターンを使用する頻度はとても高いので、参考になれば幸いです。
最後まで読んでいただきありがとうございました！
