【簡単CSS】flexboxで孫要素の高さを揃えて均等に子要素を横並び配置する方法
CSSのflexboxを使って要素を横並び配置している。
孫要素の高さがバラバラなので子要素の高さにバラつきがある。
孫要素の高さを揃えて子要素が均等に横並び配置されるようにしたい。
本記事ではこのような悩みを解決します。
サンプルコード
See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0
cssのflexboxを使って子要素を均等に横並び配置した例です。
テキストと文字列が入ってる孫要素が子要素によって文字数がバラバラですが、もっと見ると文字列が入ってる要素が綺麗に下揃えで配置されており、子要素の高さが均一に揃ってます。
次章で詳細を説明します。
flexboxで孫要素の高さを揃えるCSS
//親要素
.flex {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
//子要素
.list {
display: flex;
flex-direction: column;
flex: 0 0 32%;
}
//孫要素
.title {
flex: 1 auto;
}
孫要素の高さを揃えるサンプルCSSコードです。
親要素にdisplay: flex;をあて子要素を横並びに配置。
次に子要素にもdisplay: flex;をあてます。
さらに子要素にflex-direction: column;を指定、ブロック要素と同じく垂直方向に孫要素が縦並びになり、且つflexboxのプロパティが使える状態になります。
最後に高さを揃えたい孫要素（前章のサンプルでテキストとなってた箇所）にflex: 1 auto;を記述します。
上記プロパティを当てることで複数の孫要素の中で高さが余ってる孫要素のスペースを伸ばす事ができ、均一に揃える事が出来ます。
以上の方法で子要素・孫要素の高さを均一にflexboxで横並び配置する事できます。
まとめ
IEブラウザなど古いバージョンのブラウザでは本記事の方法は使えないです。
今まではmatchheightプラグインなどのJSを使って高さを均等に揃えてましたが、本記事の方法を使うとCSSだけで完結する事が出来るので便利です。
以上で解説を終わります。
目次
