コーディング

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

2017.10.10

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

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。