【CSS3】CSS flexible boxを使ってバラバラの高さを持つ要素の高さを同じ高さに揃える

2015.05.07

隣り合う要素同士の高さをCSSを使って揃える

イメージ画像
flexible boxでは今までJavaScriptなどで行っていた要素の高さをそろえる処理をCSSで実現することができます。
レスポンシブデザインやディスプレイサイズに影響を受ける構成の場合に威力を発揮します。

CSS3にはdisplayに対してflexという指定ができます。
このflexという指定を要素の高さを揃えたい親要素に指定します。

その親要素の中にある要素が高さをそろえる対象になります。

例えば、
HTML:
要素1
要素1
要素1
要素2
要素3
要素3
要素4
というようなHTMLがあった場合のCSSでは、
CSS:
.parent {
  display: flex;
}
という指定をします。

ただ仕様うんぬんもあり各ブラウザのベンダープレフィックスもあるようで、
IEはIE10から対応など下位ブラウザをどうするかで使用するかどうかは別れると思います。

でも使えるプロパティも豊富なので今までCSSではかなり無理をしないと実現できなかったレイアウトも、
flexible boxを使い慣れると色々な構成が実現できるので今後のためにも練習するのをおすすめします。
← 【fullPage.js】縦にも横にもスライドして画像も動画も全画面表示できるシングルページ向けjQueryプラグイン
【WordPress】the_weekday()、the_time()を使って投稿した日の曜日を日本語や英語で表示する →