Flexboxの特性をうまく使い、Media Queries無しでレスポンシブ対応のレイアウトを作成するCSSのテクニック

サイト構築 -CSS

Post on:2016年6月16日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

非常にシンプルなHTMLで、Flexboxの特性をうまく使い、Media Queries無しでレスポンシブ対応のレイアウトを作成するCSSのテクニックを紹介します。

スマホ時はサイドバーを下に落とすレイアウトなど、利便性が高いと思います。

Using flexbox to make responsive widgets without media queries.

デモでは、デスクトップの2カラムでは右のカラム（ピンク）が300px固定で、左のカラム（グリーン）が最小幅400pxを下回ると、垂直方向に積み重なります。積み重なった時は、2つのカラムは100%で表示されます。

デモのアニメーション

全体の幅を設定することで、ページ全体のレイアウトやウィジェット用のレイアウトに利用できます。

全体の幅を変えたデモ

入れ子で利用することも可能です。

入れ子のデモ

実装

HTML

ベースとなるHTMLは、シンプルです。
アイテムを2つ、それを内包するコンテナを1つ用意します。

<div class="container column100">
 <div class="fluidWidthDownToAPoint"></div>
 <div class="fixedUnlessOnOwnRow"></div>
</div>

</div>

CSS

幅の広い方（可変）と狭い方（固定）、どちらも最小幅となる値を「flex-basis」で定義します。

表示サイズを変えた時に、広い方が400pxより狭くなると、垂直に配置されます。
垂直に配置された時、2つのカラムが最小幅より広くても100%で表示されるのは「flex-grow」を定義することで、フリースペースいっぱいに表示しているためです。

.container{
  display:flex;
  flex-wrap:wrap;
}
.fluidWidthDownToAPoint{
  flex-grow:999999; // もう一方と比較して大きい数字（大きすぎるとIEは計算し損ねる）
  flex-shrink:1;
  flex-basis:400px; //最小幅
}
.fixedUnlessOnOwnRow{
  flex-grow:1; // もう一方と比較して小さい数字
  flex-shrink:1;
  flex-basis:300px; //最小幅
}

.column100{
  width:100%;
}
.column80{
  width:80%;
}
.column60{
  width:60%;
}
.column40{
  width:40%;
}
.column20{
  width:20%;
}