素材の壺

横並びのボックスの高さを揃える。tableなら出来るけど、divやliなどで組んでいる横並びのボックスの高さを揃える場合、それもheight固定でなく要素の中身に応じて可変とする場合、長らく「heightLine」というJSもしくはjQuery版を使用していました。

しかし時は流れてCSS3.0。表現が増えたCSS3.0で使用できるようになったレイアウトモジュール「Flexbox」で簡単に表現できるようになりました。

Flexboxdで高さを揃えながら横並びにレイアウト

まずは親のdivの中に子のdivが3つ並ぶ例として、HTMLを用意します。

Flexboxに関するデモ表示用のテキストです。ここは1番目のdivです。
2番目のdivです。
3番目のdivです。Flexboxを使えば縦の高さが揃うという動作確認のためテキストの量が異なるdivを並べています。

子のdivにCSSを適用してみます。

.wrapper{

}
.list{
width: 29%;
padding: 10px;
background: #eee;
border: 1px solid #ccc;
}

この状態だと横幅が指定された状態で、縦に並びます。

続いて親のdivに「display: flex;」を指定してみます。

.wrapper{
display: flex;
}
.list{
width: 29%;
padding: 10px;
background: #eee;
border: 1px solid #ccc;
}

するとfloatのように横並びになり、且つ高さが自動で揃ってくれました。

Flexboxで横に均等配置

これを横いっぱいに均等配置する場合、横幅を計算したうえでmargin等で指定する事も可能ですが、Flexboxであれば親のdivに「justify-content: space-between;」を指定するだけで簡単に実装が可能です。

.wrapper{
display: flex;
justify-content: space-between;
}
.list{
width: 29%;
padding: 10px;
background: #eee;
border: 1px solid #ccc;
}

とても簡単ですね。習慣で「heightLine」を使用していた方も、この機会に「Flexbox」での実装に切り替えてはいかがでしょうか。
以上、ボックスの高さを揃えるならCSSのFlexbox、その書き方についてでした。