Flexboxと孫要素
@wordpressFlexboxが高さを自動的に揃えてくれるのは子要素までです。
孫要素までは効きません。
たとえば下の例の場合。
<div class="parent">
<div class="child">
<div class="dog-image"><img src="img/01.jpeg"></div>
<p class="grandchild">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="dog-breed">シベリアンハスキー</p>
</div>
<div class="child">
<div class="dog-image"><img src="img/02.jpeg"></div>
<p class="grandchild">テキストテキストテキストテキスト</p>
<p class="dog-breed">柴犬</p>
</div>
<div class="child">
<div class="dog-image"><img src="img/03.jpeg"></div>
<p class="grandchild">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="dog-breed">ゴールデンレトリバー</p>
</div>
</div>
.parent {
display: flex;
}
親要素(parent)にdisplay: flexを指定して高さが揃うのは子要素のchildまでです。
孫要素のgrandchildの高さは揃いません。
そこで高さを揃えるためにまずgrandchildの親要素にあたるchildに display: flex を指定します。
次にこのままだと横並びになってしまうので flex-direction:column で縦並びにします。
.child {
display: flex;
flex-direction: column;
}
まだこの時点ではgrandchildの高さは揃いません。
最後にgrandchildに flex-grow:1 を指定します。
flex-growはボックス内の余白を割り当てるプロパティです。
テキストにすべての余白を割り当てることで、ボックス内の高さが均等になります。
.grandchild {
flex-grow: 1;
}
