コーディングをしているときに、横並びのボックスの高さを揃えたい時ありませんか？
このブログでは、そんなときに使えるCSSを２つ紹介します。
【方法１】display:flex;
１つ目の方法が親要素にdisplay:flex;を設定することです。
display:flex;は要素を横並びにするために使われるものですが、設定しておくだけで最も内容量が大きいボックスの高さに、他のボックスの高さが揃います。
親要素に一行を加えるだけなので、非常に便利です。
しかし、対応ブラウザには要注意です。
大半のブラウザの最新版ではFlexboxの対応が進んでいますが、古いバージョンでは非対応の場合があります。
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
【方法２】display:flex; / align-items:stretch
【方法１】の方法で行い、ブラウザが未対応で要素が揃わなかった場合、こちらの【方法２】をお試しください。
その方法が「align-items:stretch;」です。
【方法１】で親要素に設定した、display:flex;とセットで使うことによって、その効果を発揮します。
このalign-items:stretch;を指定すると要素を縦方向に最大まで広げます。
これにより横並びの高さを揃えることができます。
※「align-items」の初期値は「stretch」であるため、「stretch」指定しなくても横並びの高さが揃います。
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
