flexで画像を左右交互に配置するレイアウトを実現する方法

See the Pen aLEXLg by hoshu_t (@hoshu_t) on CodePen.

webで上のようなレイアウトのページ構成を目にしたことがありませんか。画像の項目について横に配したテキストで説明を行うよく使われるレイアウトです。少し前までこういったコーディングはflortで組むことが多かったのですがflexの対応ブラウザが多くなってきたことを受け、flexでの導入機会が増えています。
このレイアウトのバリエーションでよく見るものに、画像を左右交互に配するものがあります。今回はそれをflexを使いながら実現する方法を紹介します。

flex-directionで並び順を逆に

display:flex;されている.boxに対してflex-directionを使うと要素の並び順を制御することができます。ここでは左右の並び順を逆にするflex-direction:row-reverse;を使います。

あとはnth-childなどで逆順にしたい.boxを制御して完成です。とてもシンプルです。

See the Pen OxzdQj by hoshu_t (@hoshu_t) on CodePen.

記事タイトル通り左右交互に配置した例が上記になります。

まとめ

flexboxには多くのプロパティがあり、今まで使っていたレイアウトの組み方を、今までよりシンプルに制御できるようなものも多いです。制御がシンプルになるのは、制作コストの削減になるので大歓迎ですよね。便利なものが見つかったらまた紹介したいと思います。