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

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

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

サイトのキャプチャ

Using flexbox to make responsive widgets without media queries.

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

デモのアニメーション

デモのアニメーション

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

デモのキャプチャ

全体の幅を変えたデモ

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

デモのキャプチャ

入れ子のデモ

実装

HTML

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

CSS

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

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

Flexboxのプロパティの挙動について、更に詳しい情報は下記をご覧ください。

flexboxの各プロパティの解説

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

top of page

©2017 coliss