【中身の高さが揃わない！？】Flexboxで孫要素の高さを揃える方法

要素の高さが揃わない

そんな悩みにお答えします。

横並びのカードタイプのコーディング時に要素の高さが揃わずに苦労した経験はありませんか？

たとえばこんなやつです。

上の例の場合、テキストの文字数の影響を受けて下の日付の高さがバラバラです。

これはかっこ悪すぎる…。

なんとかせねばということで解決していきましょう。

Flexboxで高さを揃える

まずdiv等のブロック要素を横並びするときの手法としてよく用いるのが、float・display:inline-block・Flexboxの３つです。

この中でFlexboxはボックスを横並びにしつつ高さも揃えてくれます。

たとえば下の例のような親要素(parent)内の３つのボックス(child)を横並びにしたとします。

<div class="parent">
  <div class="child">
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  </div>
  <div class="child">
    テキストテキスト
  </div>
  <div class="child">
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  </div>
</div>

この状態で各要素を同一幅で指定した場合、各ボックスの高さは揃わなくなります。

ですが Flexboxを使えばボックスの高さは均一になります。

.parent {
display: flex;
}

.child {
width: 200px;
background: #c1f5bf;
margin-right: 10px;
padding: 10px;
}

この場合最も内容量が大きいボックスの高さにすべてが揃います。

つまり要素の高さを揃えるには、並列させたいボックスの親要素にdisplay: flex を指定すればいいということになります。

Flexboxと孫要素

ですがこれだけではすべては解決しません。

Flexboxが高さを自動的に揃えてくれるのは子要素までです。

孫要素までは効きません。

たとえば下の例の場合。

<div class="parent">
  <div class="child">
    <div class="dog-image"><img src="img/01.jpeg"></div>
    <p class="grandchild">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p class="dog-breed">シベリアンハスキー</p>
  </div>
  <div class="child">
    <div class="dog-image"><img src="img/02.jpeg"></div>
    <p class="grandchild">テキストテキストテキストテキスト</p>
    <p class="dog-breed">柴犬</p>
  </div>
  <div class="child">
    <div class="dog-image"><img src="img/03.jpeg"></div>
    <p class="grandchild">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p class="dog-breed">ゴールデンレトリバー</p>
  </div>
</div>

.parent {
  display: flex;
}

親要素(parent)にdisplay: flexを指定して高さが揃うのは子要素のchildまでです。

孫要素のgrandchildの高さは揃いません。

そこで高さを揃えるためにまずgrandchildの親要素にあたるchildに display: flex を指定します。

次にこのままだと横並びになってしまうので flex-direction:column で縦並びにします。

.child {
  display: flex;
  flex-direction: column;
}

.grandchild{
  flex-grow: 1;
}

まとめ：Flexboxはやっぱり便利！

Flexboxはやっぱり便利です。

ブロック要素でボックスの高さを揃えながら並べるにはdisplay: flex。

ボックス内の要素の高さを均等にするにはflex-grow。

実際使いながらいろいろ覚えていきましょう。

• Twitter
• Facebook

投稿者 トシ

関連記事

【display: gridが最強】gridでカード型レイアウトをコーディング！

【CSS】写真と背景色を重ねてずらす表現方法　

【CSS】背景色を2色で分割表示する方法

【Flexbox】偶数番目と奇数番目で画像の配置を左右反転させる方法

CSSのみのドロップダウンメニューの作り方【多階層メニュー】

【Flexbox】横並びにした画像の縦伸びを防ぐ方法