[CSS]Flexboxで実装されたグリッドをはじめ、基本となるコンポーネントやページレイアウトのまとめ

ベースとなる12カラムのグリッド、コンテンツとサイドバー、左寄せ・中央配置・右寄せ、ネストしたコンテンツ、天地揃え、ヘッダ・フッタ付きの3カラムのページレイアウトなど、それぞれをFlexboxを使って実装したレスポンシブ対応のスタイルシートを紹介します。 Responsive Grid with Flexbox Flexboxの各プロパティの解説は、下記ページをご覧ください。 最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Flexboxで実装された各コンポーネントやレイアウトは全てレスポンシブ対応で、デスクトップ・タブレットサイズの表示時は下記のようになります。 ※スマホ時は1カラムになってしまうのが多いので一部略。 ページのレイアウト（表示：1,200px, 780px, 480px） HTML 基本はdivでclassを付与します、

[ainame]

良い

[ryownet]

flexboxのグリッドシステム。IE9以下はNGだね

[qrac_jp]

サイトのベースに組み込みやすそう！

[soramimi-cake]

スタンダードになっていくのかな

[nors]

http://codepen.io/irinakramer/pen/jcLlp

[hedeyoshi]

レスポンシブとグリッドだけ使いたかったらこういうのでもいいんだよなあ。既存のフレームワークは色々入っててカスタムするのも……。