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

デモ

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

子要素の高さを揃える

HTML

<div class="flex">
  <div class="child">
    <figure><img src="https://placehold.jp/1024x450.png?text=IMG"></figure>
    <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
  </div>
  <div class="child">
    <figure><img src="https://placehold.jp/1024x450.png?text=IMG"></figure>
    <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
    <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
  </div>
  <div class="child">
    <figure><img src="https://placehold.jp/1024x450.png?text=IMG"></figure>
    <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
    <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
    <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
  </div>
</div>

CSS

.flex {
    display: flex;
}
.flex .child {
    flex: 1 0 auto; /* fix IE11 */
}

親要素にdisplay: flex;を指定すると、子要素の高さが揃います。
ただ、それだけだとIE11では大きさがおかしくなるので、flexbox内の子要素にflex: 1 0 auto;を指定します。

孫要素の高さを揃える

HTML

<div class="flex2" style="margin-top: 20px">
  <div class="child">
    <div class="grand-child">
    <figure><img src="https://placehold.jp/1024x450.png?text=IMG"></figure>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
    </div>
  </div>
  <div class="child">
    <div class="grand-child">
      <figure><img src="https://placehold.jp/1024x450.png?text=IMG"></figure>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
    </div>
  </div>
  <div class="child">
    <div class="grand-child">
      <figure><img src="https://placehold.jp/1024x450.png?text=IMG"></figure>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
    </div>
  </div>
</div>

CSS

.flex2 {
    display: flex;
}
.flex2 .child {
    display: flex;
    flex: 1 0 auto; /* fix IE11 */
}

孫要素を揃える方法は、子要素を揃える方法の子要素のCSSにdisplay: flex;を指定するだけです。

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

HTML

<div class="flex3" style="margin-top: 20px">
  <div class="child">
    <div class="grand-child">
      <figure><img src="https://placehold.jp/1024x450.png?text=IMG"></figure>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p class="link"><a class="btn" href="#">button</a></p>
    </div>
  </div>
  <div class="child">
    <div class="grand-child">
      <figure><img src="https://placehold.jp/1024x450.png?text=IMG"></figure>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p class="link"><a class="btn" href="#">button</a></p>
    </div>
  </div>
  <div class="child">
    <div class="grand-child">
      <figure><img src="https://placehold.jp/1024x450.png?text=IMG"></figure>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT.</p>
      <p class="link"><a class="btn" href="#">button</a></p>
    </div>
  </div>
</div>

CSS

.flex3 {
    display: flex;
}
.flex3 .child {
    display: flex;
    flex: 1 0 auto; /* fix IE11 */
}
.flex3 .grand-child {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; /* fix IE11 */
}
.flex3 .grand-child > *{
   flex-shrink: 0; /* fix IE11 */
}
.flex3 .grand-child .link {
  margin-top: auto; /* 位置を下に揃える */
  margin-bottom: 0; /* 装飾 */
  text-align: center; /* センタリング */
}

IE11の対応で少しコードが多くなっていますが、
ポイントは、孫要素にdisplay: flex;flex-direction: column;を指定。
孫要素内のボタンにmargin-top: auto;を指定するだけです。

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