flex-direction:row-reverseで画像と文字を交互に
画像とテキストを交互にする方法を解説します｡5個くらいなら､HTMLで交互に書けばいいでしょう｡しかし､100個､200個となると､どこかで間違う可能性があります｡
そのとき､flex-direction: row-reverseを使えば簡単です｡
完成系は以下になります｡
完成形
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
HTML
<div class="row">
<figure><img src="images/samurai.png"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
<div class="row">
<figure><img src="images/samurai.png"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
.rowで画像と文字を囲んでいます｡何ら問題ない､HTMLですね｡簡単です｡
SCSS
.row{
display: flex;
gap: 1rem;
margin-bottom: 2rem;
&:nth-child(even) {
flex-direction: row-reverse;
}
}
.rowに､disp;ay:flexで横並びします｡gapで間隔を開けています｡あとは､&:nth-child(even)と､flex-direction: row-reverse;を書いています｡ポイントは､rowの中に書くこと｡
CSSも載せておきます｡
CSS
.row {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.row:nth-child(even) {
flex-direction: row-reverse;
}
CSSの方が単純でわかりやすいか｡ただ､CSSはコンパイルの必要がありません｡SCSSはCSSにコンパイルする必要があります｡vscodeであれば､Live Sass Compilerでコンパイルできます｡
さいごに
わりと使うシーンがあると思います｡お試しあれ｡他にもホームページ制作系のページがあるので､気になる方はチェックして下さい｡