左に画像、右にテキスト。よくある2カラムのデザイン。
スマホは画像が上で、テキスト下なら何も問題ないけど、下記のように逆を指定されることしばしば。CSSでいちいち背景化するか、PC用、スマホ用にタグを増やすか・・・
こんな時に「display: flex」!
flex-direction: row-reverse;
テキスト、画像の順で書いておいて、PCの場合はリバース、もしくは画像、テキストの順でスマホをリバースといった具合。
左に画像、右にテキスト。よくある2カラムのデザイン。
スマホは画像が上で、テキスト下なら何も問題ないけど、下記のように逆を指定されることしばしば。CSSでいちいち背景化するか、PC用、スマホ用にタグを増やすか・・・
flex-direction: row-reverse;
テキスト、画像の順で書いておいて、PCの場合はリバース、もしくは画像、テキストの順でスマホをリバースといった具合。