そんな悩みにお答えします。
横並びのカードタイプのコーディング時に要素の高さが揃わずに苦労した経験はありませんか？
たとえばこんなやつです。
上の例の場合、テキストの文字数の影響を受けて下の日付の高さがバラバラです。
これはかっこ悪すぎる…。
なんとかせねばということで解決していきましょう。
Flexboxで高さを揃える
まずdiv等のブロック要素を横並びするときの手法としてよく用いるのが、float・display:inline-block・Flexboxの３つです。
この中でFlexboxはボックスを横並びにしつつ高さも揃えてくれます。
たとえば下の例のような親要素(parent)内の３つのボックス(child)を横並びにしたとします。
<div class="parent">
<div class="child">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>
<div class="child">
テキストテキスト
</div>
<div class="child">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>
</div>この状態で各要素を同一幅で指定した場合、各ボックスの高さは揃わなくなります。
ですが Flexboxを使えばボックスの高さは均一になります。
.parent {
display: flex;
}
.child {
width: 200px;
background: #c1f5bf;
margin-right: 10px;
padding: 10px;
}
この場合最も内容量が大きいボックスの高さにすべてが揃います。
つまり要素の高さを揃えるには、並列させたいボックスの親要素にdisplay: flex を指定すればいいということになります。
Flexboxと孫要素
ですがこれだけではすべては解決しません。
Flexboxが高さを自動的に揃えてくれるのは子要素までです。
孫要素までは効きません。
たとえば下の例の場合。
<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{
flex-grow: 1;
}
まとめ：Flexboxはやっぱり便利！
Flexboxはやっぱり便利です。
ブロック要素でボックスの高さを揃えながら並べるにはdisplay: flex。
ボックス内の要素の高さを均等にするにはflex-grow。
実際使いながらいろいろ覚えていきましょう。
投稿者 トシ
コメントを残す