はじめに

どうも！
今回はionic4で開発をしていてこれはちょっといいなと思った機能をご紹介します
ion-wrap-reverseってご存知ですか？
こいつ痒いところに手が届く機能なんです。

ion-wrap-reverseとは

使い方としてはこう

<ion-content><ion-grid><ion-rowclass="ion-wrap-reverse"><ion-colsize="12"size-sm><ion-buttoncolor="primary">上だったのに</ion-button></ion-col><ion-colsize="12"size-sm><ion-buttoncolor="danger">下だったのに</ion-button></ion-col></ion-row></ion-grid></ion-content>

ion-gridに class="ion-wrap-reverse"を追加すると
設定したsizeに合わせてレスポンシブ対応をするんですが、
上下逆になってくれるんです！
cssでも flex-wrap: wrap-reverse;を使えばいけますが
class="ion-wrap-reverse"の方が楽チンで好きですw

デモ

終わりに

ion-wrap-reverseの様なionic特有のクラスっていっぱい有りそうなので
次の記事でまとめやりたいなぁと思います。