福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 左右に配置するレイアウトはdisplay:flex; flex-direction: row-reverse;で簡単にできる

SUGOYOKU BLOG

左右に配置するレイアウトはdisplay:flex; flex-direction: row-reverse;で簡単にできる

福岡のホームページ制作、SEO対策会社のスゴヨクです。

今回はパソコンのレイアウトでよく見る左右に配置するレイアウトの配置方法の紹介です。

前はfloatを使って「left、right」としていましたが、
現在はdisplay: flex;で簡単に出来ます!

ディスプレイフレックス
上記のような画像のレイアウトの場合のHTMLは

HTMLは普通に記述します。
ul liじゃなくても全然大丈夫です!

次にcssです。

上記をコピペして配置をすれば、左右のレイアウトになります。

左右のレイアウトがしたいとお考えの方はコピペをすれば簡単なので、どうぞ!

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP