LIGデザイナー採用
LIGデザイナー採用
2018.05.24
#147
それいけ!フロントエンド

互い違いレイアウトの組み方〜レスポンシブ編〜

はっちゃん

こんにちは! はっちゃんです。
今回はコーディングであるあるの「互い違いレイアウト」の組み方をご紹介します。
レスポンシブ対応で、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のお陰でこういうレイアウトもスッキリ書けるようになりましたね!
次回はもうちょっとだけ制約がついた場合の組み方を紹介します!