こんにちは！ はっちゃんです。
今回はコーディングであるあるの「互い違いレイアウト」の組み方をご紹介します。
レスポンシブ対応で、SP表示時には縦並びになるようにします。
要件
- PC表示
-
- ブラウザ幅が769px以上だったらPCレイアウト表示
- 互い違い
- SP表示
-
- ブラウザ幅が769px未満だったらSPレイアウト表示
- 均一に縦並び
flex-directionで並びを入れ替える
それでは早速組んでいきましょう。
互い違いには、Flexboxのflex-directionを使用します。
See the Pen Alternate Layout1 by k_hatsushi (@hatsushi_kazuya) on CodePen.
メディアクエリでSP時にはFlexboxを解除
Flexboxを解除するだけで、DOMを書いた順に縦に積み上がっていきます。
See the Pen Alternate Layout2 by k_hatsushi (@hatsushi_kazuya) on CodePen.
まとめ
いかがでしたか？
Flexboxのお陰でこういうレイアウトもスッキリ書けるようになりましたね！
次回はもうちょっとだけ制約がついた場合の組み方を紹介します！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
