はじめに
サイト作成でのPC・SPで表示切り替えするのにできるだけコードを減らしたいなと思ってたこの頃。
wrap-reverseという便利なものに出会いました。もっと早く知っていれば、、！！
実際に使用した内容
以下のようにPC・SPで画像、文字の位置が異なる時に使用しました。
以前のやり方
PCとSPで画像とテキストの位置が変わる時に初め以下のようにしていちいちdisplay: none; display: block;を使って表示切り替えをしていました。
See the Pen wrap-reverse_test by 藤野美優 (@lgexfaug-the-sasster) on CodePen.
wrap-reverseを使用したやり方
コードも少ないし、メディアクエリを利用しなくても自動で画像・文字の位置を入れ替えてくれます。
See the Pen wrap-reverse_test by 藤野美優 (@lgexfaug-the-sasster) on CodePen.
wrap-reverseとは
親要素から子要素であるflexアイテムがはみ出てしまった時、自動的に改行をして表示させることが出来ます。
wrap-reverseで使用できる値
| 属性 | 内容 |
|---|---|
| nowrap | flexアイテムを折り返さない（デフォルト） |
| wrap | flexアイテムを折り返す（左から右） |
| wrap-reverse | flexアイテムを折り返す（右から左） |