エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
[初心者向け][css]flexで交互に配置するレイアウト | HINODE ICT lab
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
[初心者向け][css]flexで交互に配置するレイアウト | HINODE ICT lab
こんにちは、デザイナーのsochanです。 日々デザインをしたり、コーディングする中で(このやり方メモし... こんにちは、デザイナーのsochanです。 日々デザインをしたり、コーディングする中で(このやり方メモしておきたいな…) ということが出てきます。 そのうちの一つ、今回はflexで画像とテキストを交互に配置するレイアウトについてまとめました。 要素を交互にレイアウトしたい PCの時に左右で画像とテキストが入れ替わり、 スマホに切り替わった時は上が画像、下がテキストになるようにレイアウトしたい。 (こんな感じのレイアウト↓) しかしPCの時に左右入れ替わるようなHTMLを記述すると、 スマホ表示の際に↓のような配置になります。 PCのみだと問題ないですが、そんなわけにもいきません… スマホで見た際にも画像とテキストを交互にし、 後々要素が増えてもPC表示、スマホ表示で影響がない記述にしたい。 その場合、flex-directionを使います。 flex-direction 実際にflex-d