本文
こんにちは。菜笑なえです。
CSSで要素の高さをそろえるのって、どうすればいいんだろうと悩みますよね。
jQueryのプラグインとかもありますが、CSSでも可能なので解説していきます。
実際のサンプルもあります。
目次
CSS Flexboxを使用して要素の高さをそろえる方法 【ポイント4つ】
完成コード（コピペOK）
See the Pen display flex-complete by NaeSato (@N310) on CodePen.
4つのポイント
- 親要素(ul)に
display:flex;,flex-wrap:wrap;を指定 - 子要素(li)に
display:flex;,position: relative;,padding-bottomを指定 - 下配置要素(button)に
position: absolute;,bottomを指定 - 子要素(li)の
padding-bottomの値は、下配置要素(button)の高さよりも大きくする
理由はわからなくても、この４つのポイントを抑えてCSSを書いてください。
コンテンツの長さに関係なく、全要素の高さがキレイにそろいます！
もちろんレスポンシブです。
めちゃくちゃ簡単ですね。
おわりに
flexをよく理解してなかったときは、jQueryのほうが慣れてるしと思いプラグイン（matchHeight, tileとか）を使っていました。
ですが、CSSでこれだけ手軽にできるならプラグイン使うまでもないかなと思います。
なぜFlexboxを指定しただけで高さがそろうのか？という理由については後日、別記事で解説する予定です。
