こんにちは、デザイナーのsochanです。 日々デザインをしたり、コーディングする中で（このやり方メモしておきたいな…） ということが出てきます。 そのうちの一つ、今回はflexで画像とテキストを交互に配置するレイアウトについてまとめました。 要素を交互にレイアウトしたい PCの時に左右で画像とテキストが入れ替わり、 スマホに切り替わった時は上が画像、下がテキストになるようにレイアウトしたい。 （こんな感じのレイアウト↓） しかしPCの時に左右入れ替わるようなHTMLを記述すると、 スマホ表示の際に↓のような配置になります。 PCのみだと問題ないですが、そんなわけにもいきません… スマホで見た際にも画像とテキストを交互にし、 後々要素が増えてもPC表示、スマホ表示で影響がない記述にしたい。 その場合、flex-directionを使います。 flex-direction 実際にflex-d