Webデザインにおいてもはや必須となっているレスポンシブ対応。
しかし、メディアクエリを駆使していちいちブレイクポイントを作ってCSSを指定するのは煩雑で、つい億劫になってしまうこともありませんか？

そこで今回は、メディアクエリに頼らず、より柔軟でスマートなレスポンシブデザインを実現する方法をご紹介します。

アイテムを横並びに配置するのに、よく使われがちなflexbox。

要素が横並びになったときにdisplay: flex;にして、スマホではdisplay: block;にして縦並びにするのが割と定番の方法かと思います。

ですが私はスマホでdisplay: block;せずにflex-direction: column;で縦並びにする方法をここで提唱しておきます。

なんなら、PCで横並びにならないエリアさえもflex-direction: column;でレイアウトしちゃいます。

なぜなら、できるだけflexboxを活用することで、要素のサイズや余白の設定などを容易にできるからです。

実際にPC画面で要素が3つ横に並び、スマホでは縦に並ぶよくありがちなレイアウトを、従来のCSS記法と新しいCSS記法で比較してみましょう。

従来の記法

.parent{
    display: flex;
}
.child{
    /* めんどくさポイント */
    width: calc((100% / 3 ) - 16px);
    justify-content: space-between;
}
@media (max-width: 767px){
    .parent{
        display: block;
    }
    
    /* めんどくさポイント */
    .parent:not(:last-child){
        padding-bottom: 16px;
    }
    .child{
        width: 100%;
    }
}

子要素のwidthをちゃっかり3等分にするために、calc(100% / 3 )とします。
さらに、子要素間に余白を空けるため、calc(100% / 3 )から余白分幅を引きます。
後々、情報が追加されて、要素が4つになってしまった場合、calc(100% / 4 )にしなければなりません。これはめんどくさいですね。

また、display: block;で縦並びにした場合、子要素間の行の余白がなくなってしまうので、.parent:not(:last-child)というめんどくさいセレクタ指定をして、子要素間の余白を設けなければなりません。

新しい記法

/* 新しい記法 */
.parent{
    display: flex;
    /* gapは要素間のすき間を自由に定義できます。 */
    gap: 16px;
}
.child{
    /* flex:1とすることで、子要素の幅は均等に分配されます。 */
    flex: 1;
}
@media (max-width: 767px){
    .parent{
       flex-direction: column;
    }
    .child{
        width: 100%;
    }
}

このようにgapやflexプロパティを使うことで、先ほどのめんどくさいcss記述がなくなり、シンプルになりました。

また、最近はノーコードでのサイト制作がトレンドになっています。
ノーコードでWebデザインやプロトタイプが作れるツール代表格である『Figma』はまさにflexboxを大いに活用してレイアウトするツールです。

参考：

今後のノーコードとflexboxは切っても切り離せない関係になってくるでしょう。
今のうちに、flexboxに慣れていた方が良いかもしれません。