Written by Kasumi

【簡単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だけで完結する事が出来るので便利です。

以上で解説を終わります。

目次

関連記事

プログラミング

【メイクショップ クリエイターモード】コーディング作業で気づいた事

更新日:2020.06.12
1805
HTMLCSS

CSSだけで台形を作る方法

更新日:2022.09.21
1641
WordPress プログラミング

【wordpress】子カテゴリページで親カテゴリの情報を取得する方法

2021.11.01
2058
HTMLCSS プログラミング

【簡単CSS】横・縦スクロールバーを非表示にする方法【Chrome・Safari・Firefox・IE・Edge対応】

2022.03.15
4105