【flex】子要素から孫要素まで高さを揃える方法

要素の高さを揃えるには高さを指定したりjsを使ったりして揃えることも多いと思います。

ですがflexを使うことで高さを簡単に揃えることができます。

たとえば子要素だけでなく孫要素まで高さを揃えたいときでもflexを使うことで簡単にできます。

子要素から孫要素まで高さを揃える方法

html

<div class="box">
        <ul>
                <li><div>テキスト</div></li>
                <li><div>テキストテキストテキストテキストテキストテキストテキスト</div></li>
                <li><div>テキスト</div></li>
                <li><div>テキストテキスト</div></li>
                <li><div>テキスト</div></li>
                <li><div>テキストテキスト</div></li>
                <li><div>テキストテキストテキストテキストテキスト</div></li>               
            
        </ul>
</div>

css

 .box ul{
        display: flex;
        flex-wrap: wrap;
}      

.box ul li{
        text-align: center;
        width: 15%;
        padding: 10px;
        background: #eee;
        display: flex;
        margin: 0 10px 10px 0;
}
       
.box ul li div{
        width: 100%;
        background: #bbb;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
}

子要素から孫要素まで高さを揃えるには子要素、孫要素にそれぞれflexを指定してあげれば簡単に実現可能です。

サンプル