また、Flex ＋ Card (画像と長さの違う文章 + 短い注釈) に苦しめられる…。
こういうやつ…。
値段の位置、気になる！
下に揃えたい。何回か実装しているはずなのに、また手こずったので、メモ！
タップで読みたいところにジャンプします
完成形はこちら
HTMLのコード
<!-- === 親要素 === -->
<ul class="CardList">
<!-- === 子要素 === -->
<li class="CardList__Item CardItem">
<div class="CardItem__AreaImage CardAreaImage">
<!-- 写真 -->
<img class="CardAreaImage__Image CardImage" src="./img/pasta_calbo.jpg" alt="">
<!-- タグ -->
<div class="CardAreaImage__Tag CardImageTag">
<span>単品</span>
</div>
</div>
<!-- === 孫要素 === -->
<div class="CardItem__Body CardBody">
<!-- 料理名 -->
<div class="CardBody__Title CardTitle">
カルボナーラ
</div>
<!-- 料理の説明 -->
<div class="CardBody__Note CardNote">
濃厚なクリームチーズとさわやかなブルーベリーソースのハーモニーが楽しめるケーキ
</div>
<!-- 値段 -- Target -->
<div class="CardBody__Price CardPrice">
1,200円
</div>
</div>
</li>
<li>
＝＝＝ 繰り返し ＝＝＝
</li>
<ul>css の考え方
親要素に設定
.CardList {
display: flex;
}子要素に設定
.CardItem {
display: flex;
flex-direction: column;
&__Body{
height:100%
}
}ここで子要素の高さをしっかりとる。
孫要素に設定
.CardBody {
display: flex;
flex-direction: column;
}Taegetに設定
.CardBody__Price {
margin-top: auto;
}まとめ
次は絶対に詰らない!!
コメント