on:2014年11月20日sponsorsベースとなる12カラムのグリッド、コンテンツとサイドバー、左寄せ・中央配置・右寄せ、ネストしたコンテンツ、天地揃え、ヘッダ・フッタ付きの3カラムのページレイアウトなど、それぞれをFlexboxを使って実装したレスポンシブ対応のスタイルシートを紹介します。FlexboxFlexboxの各プロパティの解説は、下記ページをご覧ください。各プロパティの使い方をヴィジュアルで詳しく解説Flexboxで実装された各コンポーネントやレイアウトは全てレスポンシブ対応で、デスクトップ・タブレットサイズの表示時は下記のようになります。※スマホ時は1カラムになってしまうのが多いので一部略。480px)HTML基本はdivでclassを付与します、例えばベースとなるグリッド(3カラム)だとこんな感じです。content-1of3"></div></div></div>コンテンツとサイドバーの組み合わせだとこんな感じ。class="Demo">auto</div></div></div>CSSベースとなるグリッドのスタイルシートは、Flexboxを使って定義します。1em;}各コンポーネントごとのスタイルシートは、下記ページでコードの編集などもできます。