【CSS】ブログリストの高さを揃える方法

CSS

完成形はこちら。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.


親要素に対してdisplay: flex;を指定してボックスの高さを揃える。

そしてアイテムに対してもフレックスを適応して縦向きにする。

最後にタイトルが可変しても高さが会うようにflex-grow: 1;で伸び率を指定したら完成。

よく出る実装なので備忘録としてまとめました。

◎参考記事

【CSSのみ】ボックスの高さを揃える方法

関連記事:

CSSで背景を透過させる方法について ブロックを中央寄せにしてテキストだけ左寄せにする方法 【CSS】display: flex;とmargin: auto;を使って要素の高さを揃える方法 【CSS】PCとスマホ両方の端末で背景を固定にする方法