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

Post on:2014年11月20日

sponsorsr

ベースとなる12カラムのグリッド、コンテンツとサイドバー、左寄せ・中央配置・右寄せ、ネストしたコンテンツ、天地揃え、ヘッダ・フッタ付きの3カラムのページレイアウトなど、それぞれをFlexboxを使って実装したレスポンシブ対応のスタイルシートを紹介します。

Responsive Grid with Flexbox

Flexboxの各プロパティの解説は、下記ページをご覧ください。

最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

Flexboxで実装された各コンポーネントやレイアウトは全てレスポンシブ対応で、デスクトップ・タブレットサイズの表示時は下記のようになります。
※スマホ時は1カラムになってしまうのが多いので一部略。

ベースのグリッド（表示：1,200px, 780px）

コンテンツとサイドバー、左・中央・右寄せ（表示：1,200px, 780px）

ネスト、天地揃え（表示：1,200px, 780px）

ページのレイアウト（表示：1,200px, 780px, 480px）

HTML

基本はdivでclassを付与します、例えばベースとなるグリッド（3カラム）だとこんな感じです。

<div class="Grid Grid--gutters Grid--cols-3 u-textCenter">
  <div class="Grid-cell"><div class="Demo content-1of3"></div></div>
  <div class="Grid-cell"><div class="Demo content-1of3"></div></div>
  <div class="Grid-cell"><div class="Demo content-1of3"></div></div>
</div>

コンテンツとサイドバーの組み合わせだとこんな感じ。

<div class="Grid Grid--gutters Grid--1of6">
  <div class="Grid-cell"><div class="Demo content-1of6"></div></div>
  <div class="Grid-cell"><div class="Demo">auto</div></div>
</div>

CSS

ベースとなるグリッドのスタイルシートは、Flexboxを使って定義します。

/*Basic Grid Styles*/
.Grid {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}

.u-textCenter {
  text-align: center;
}

.Grid-cell {
  flex: 1;
}

.Demo {
  padding: .8em 1em 0;
  margin-bottom: 1em;
  background: rgba(51, 153, 204, 0.2);
  transition: background-color 0.3s ease;
  border: 1px solid #33cccc;
  border-radius: 3px;
}
.Demo:after {
  content: "";
  display: block;
  margin-top: .8em;
  height: 1px;
}
.Demo:hover {
  background: rgba(51, 153, 204, 0.6);
}

.Demo.Holly {
  background: rgba(102, 51, 255, 0.1);
}
.Demo.Holly:hover {
  background: rgba(102, 51, 255, 0.25);
}

/* With gutters*/
.Grid--gutters {
  margin-left: -1em;
}
.Grid--gutters .Grid-cell {
  padding-left: 1em;
}
.Grid--gutters .Grid--nested .Grid-cell:first-of-type .Demo {
  margin-right: 1em;
}

各コンポーネントごとのスタイルシートは、下記ページでコードの編集などもできます。

Responsive Grid with Flexbox