【CSS】flexで横並びの高さを揃える方法【divやliも可】

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

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」であるため、コレを指定しなくても横並びの高さが揃います。

align-items: centerにするとそろわなくなる!?

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

ブロックの中の文字を中央寄せしたいとしましょう。

上下の中央寄せといえば「align-items: center」です。

これを親要素に指定すると「align-items:stretch」が効かなくなるため高さがそろわなくなってしまいます。

文字の上下中央ぞろえは子要素に指定

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

align-items: stretchはそのままに、子要素に「display: flex」と「align-items: center」を指定します。

孫要素の高さも揃えたいとき

横並び要素の中にもさらに要素がある場合です。

flexは孫要素には効かないため「align-items:stretch」は効いておらず、高さがそろいません。

下記のようになってしまいます。

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

子要素にdisplay:flexとalign-items:stretch

<style>
.example3{
    display: flex;
    align-items: stretch;
}
.example3>div{
    /*コレ*/display: flex;
    /*コレ*/align-items: stretch;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #cbe6ed;
}
.example3>div>a{
    display: block;
    width: 100%;
    border: 1px solid #999;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
}
</style>
<div class="example3">
    <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を指定しましょう。

孫要素の位置調整をするには子要素にもdisplay:flexを指定しましょう。

以上、CSS display:flexで横並びの高さを揃える方法でした。