思わぬところでwrap-reverseが役に立った話

最近、コーディングをしていて、
使いどころがよく分からなかった flex-wrap の wrap-reverse が役に立ったので、ご紹介したいと思います。

内容的にあまり参考になる方が少ないかもしれませんが、
少しでも何かの参考になればと思います。

flex-warp、wrap-reverseとは

そもそもflex-warpやwarp-reverseって、何？って方もいらっしゃると思いますので、
簡単にご説明します。

CSS のプロパティーで、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。
https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap

flex-wrapプロパティーの値（キーワード）になります。
flex-reverse以外にも値があり、各値と説明は以下になります。

フレックスアイテムを単一行に配置して、自動で折り返さない。

フレックスアイテムを自動で下に折り返す。

wrap同様に自動で折り返すが、上に折り返す。

レスポンシブで横並びのPC表示からタブレット表示にした場合、
自動改行されて、1段目にフレックスアイテムが1つ、2段目にフレックスアイテムが2つで中央揃え（三角形）で表示したいことがありました。

1つ目のフレックスアイテムの横幅を100%に設定し、自動改行させて実装しようと思いました。
しかし、各フレックスアイテムにボーダーや背景を指定している場合、1段目のフレックスアイテムのボーダーや背景が横いっぱいに表示されてしまいます。

※HTMLの組み方で解決できると思われた方もいると思いますが、
諸事情でタブレットのデザインが決まっていなかったのと、このような箇所が複数あったので、どうしてもCSSで解決したかった…。

そこで使用したのが、wrap-reverseです。
wrap-reverseは、上に改行されるので、自動改行すると1段目にフレックスアイテムが1つ、2段目は2つになります（三角形）。

並び順が逆になっているので、orderを使って並び替えて中央揃えにして完成です。
実際のソースは以下になります。

今回、状況的にあまりないかもしれないですが、
HTMLを編集できない状況やHTMLを編集するといろいろと修正が発生するなどがある場合もあるので、このようなこともできると頭の片隅に入れておいていただければと思います。