ホーム(記事一覧)へ

CSS flexで横並びの高さを揃える方法(レスポンシブ対応)

「横並びしてさらに高さをそろえたい!」

CSS display:flexで横並びの高さを揃える方法について解説します。

レスポンシブ対応もします。

【結論】display:flexとalign-items:stretchを指定





<style>
.example{
    display: flex;
    align-items: stretch;
}
.example>div{
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #cbe6ed;
}
</style>
<div class="example">
    <div>左<br>左<br>左<br>左<br>左</div>
    <div>右</div>
</div>

「display:flex」は要素を横並べなどできるCSSです。

「align-items」はdisplay:flexとセットで使えるCSSで縦方向の位置を調節できます。

「align-items:stretch」を指定すると要素を縦方向に最大まで広げます。

これにより横並びの高さを揃えることができます。

なお「align-items」の初期値は「stretch」であるため、コレを指定しなくても横並びの高さが揃います。

レスポンシブ対応

レスポンシブ対応させたいならwidthを%で指定しましょう。

「display: flex」は「float」と違い崩れないためレスポンシブ対応しやすいです。

孫要素の高さも揃えたいときは子要素にもdisplay:flex

<style>
.example2{
    display: flex;
    align-items: stretch;
}
.example2>div{
    /*コレ*/display: flex;
    align-items: stretch;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #cbe6ed;
}
.example2>div>a{
    display: block;
    width: 100%;
    border: 1px solid #999;
    padding: 10px;
    background: #fff;
}
</style>
<div class="example2">
    <div><a href="#">左<br>左<br>左<br>左<br>左</a></div>
    <div><a href="#">右</a></div>
</div>

display:flexは子要素に対して機能しますが、孫要素には影響ありません。

孫要素の高さも揃えたい場合、その親要素にもdisplay:flexとalign-items:stretchを指定しましょう。

この場合は横並びになっている要素にdisplay:flexを指定します。

【まとめ】flexで横並びの高さを揃える方法

display:flexとalign-items:stretchを指定しましょう。

以上、CSS display:flexで横並びの高さを揃える方法(レスポンシブ対応)でした。

関連記事