frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【JSなし】CSSのみで中の要素を高さ揃えする方法

スポンサードリンク


スポンサードリンク


外側ボックスを高さ揃えする方法


See the Pen
exeGgv
by funclur (@funclur)
on CodePen.


※codepenのlogoをクリックして別タブでご確認ください。

<div class="box-wrap">
    <div class="box">
        <div class="content1">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="content2">
            <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
    </div>
    <div class="box">
        <div class="content1">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="content2">
            <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
    </div>
    <div class="box">
        <div class="content1">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="content2">
            <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
    </div>
</div>

この場合.box-wrapにdisplay: flex;を付与すれば外側ボックスを高さ揃えします。

.box-wrap {
    display: flex;
    justify-content: space-between;
}
.box {
    border: 1px solid #ccc;
    padding: 15px;
    width: 300px;
}
.box > div {
    padding: 10px;
}
.box .content2 {
    border-top: 1px dashed #ccc;  
}

しかし中のコンテンツは高さがそろってません。
.content2の開始位置が一個目のボックスと2、3個目のボックスとで違うことがわかります。

従来中の要素の高さ揃えはJSで行いました。
しかし、cssで行うことでページ読み込みのパフォーマンスも実装スピードも上がります。
下記はCSSのみで中の要素を高さ揃えする方法です。

CSSのみで中の要素を高さ揃えする方法


See the Pen
omepyy
by funclur (@funclur)
on CodePen.

.box-wrap {
    display: flex;
    justify-content: space-between;
  }
  .box {
    border: 1px solid #ccc;
    padding: 15px;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .box > div {
    padding: 10px;
  }
  .box .content2 {
    border-top: 1px dashed #ccc;  
  }

ポイントは3つあります。
①.boxにもdisplay: flex;を追加します。
②flex-direction: column;を付与することでflexの性質をそのままに縦並びになります。
③justify-content: space-between;で要素同士を離します。

こうすることで一つ目の要素が高さが変わったときでも2つ目の要素の開始位置はそろうようになります。
注意点としては完全に開始位置がそろってるわけではなく、要素を離しているので2つ目の要素の文言量を増やすとずれてしまいます。

codepenに追記して確認いただければと思います。