flexbox 子・孫 要素の高さを揃える方法

デモ

See the Pen
flexbox sample
by kura (@kuranopen)
on CodePen.

子要素の高さを揃える + ボタンを下に設置

孫要素の高さを揃える

孫要素の高さを揃える

HTML


<div class="flex3" style="margin-top: 20px">
  <div class="child">
    <div class="grand-child">
      <img src="http://placehold.jp/1024x450.png?text=img">
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p class="btn">button</p>
    </div>
  </div>
  <div class="child">
    <div class="grand-child">
      <img src="http://placehold.jp/1024x450.png?text=img">
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p class="btn">button</p>
    </div>
  </div>
  <div class="child">
    <div class="grand-child">
      <img src="http://placehold.jp/1024x450.png?text=img">
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p class="btn">button</p>
    </div>
  </div>
</div>

CSS


.flex{
  display: flex;
}
.flex .child{
  width: 33%;
}
.flex .grand-child{
  display: flex;
  height: 100%;
  flex-direction: column;
}
.flex .child .grand-child .btn{
  margin-top: auto;
}

最低限必要なCSSは上記の通りです。

  1. 親要素にdisplay: flex;を指定します。
  2. 子要素にwidth: 33%;を指定して、子要素を横一列に並べます。
  3. 孫要素にdisplay: flex;を指定して、並び方調整します。
  4. 孫要素にheight: 100%;を指定して、高さを揃えます。
  5. 孫要素内をflex-direction: column;を指定して、要素を縦並びにします。
  6. ボタンの.btnmargin-top: auto;を指定して、ボタンの高さを揃えて完了です。

スポンサーリンク

スポンサーリンク

  • このエントリーをはてなブックマークに追加

【続き】 CSSテクニックの便利な使い方

新しい記事はありません