【CSS】Flexboxを使用して要素の高さをそろえる方法 【ポイント4つ】

css

本文

こんにちは。菜笑なえです。

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)の高さよりも大きくする

理由はわからなくても、この4つのポイントを抑えてCSSを書いてください。
コンテンツの長さに関係なく、全要素の高さがキレイにそろいます!

もちろんレスポンシブです。

めちゃくちゃ簡単ですね。

おわりに

flexをよく理解してなかったときは、jQueryのほうが慣れてるしと思いプラグイン(matchHeight, tileとか)を使っていました。

ですが、CSSでこれだけ手軽にできるならプラグイン使うまでもないかなと思います。

なぜFlexboxを指定しただけで高さがそろうのか?という理由については後日、別記事で解説する予定です。

SNS

Twitter:@nae310_
Instagram:310nae