左辺固定(サムネイルとか)、右可変(テキストコンテンツ)みたいなレイアウトの構造をflex-boxで表現する時のベースコード。
今までも以下のようなやり方があったけど、コードが長かったりセマンティックな感じでなくモヤモヤしてた感じ
- 古典的なtableタグを使うやり方
- display:table,display:table-cellを駆使していくやり方
flex-boxを使う利点
- コードを短縮できる
- 縦方向の中央寄せが簡単
html
<div class="item">
<div class="thumb">
<img src="hoge.png" alt="hogehoge">
</div>
<div class="content">
<p>thumbの説明テキストが入りますよ</p>
</div>
</div>
sass
.item {
display: flex;
align-items: center;
}
.thmb {
width: 100px;
}
.content {
flex: 1;
}