flexの入れ子の高さについて | 札幌 Web制作・運用更新代行 | 株式会社イデアシーディー

お知らせ

  1. ホーム
  2. お知らせ

flexの入れ子の高さについて

flexの入れ子の高さについて

cssのflexを使った際に引っかかった部分がありましたのでまとめてみました。
flexは横並びにしたブロックの高さを自動的に揃えてくれます。
しかし、下記のようにタイトルとテキストで分かれている時はタイトルの高さを揃えてはくれません。

See the Pen
flex
by kahsin0033 (@kashin0033)
on CodePen.

タイトル部分の高さを揃えたい場合

タイトルの高さを揃えたい場合は「min-height」を使用しタイトルの高さを揃えます。
「min-height」で指定する高さは一番高いコンテンツの高さを指定します。
下記で言うところの中央のブロックにあるタイトル部分です。

See the Pen
flex02
by kahsin0033 (@kashin0033)
on CodePen.

まとめ

以上がflexで入れ子になったブロックの高さを揃える方法でした。
横並びにする方法は他にも「inline-block」や「table-cell」などがありますので対応ブラウザに合わせて実装を考えた方がいいと思います。