menu
menu

キーワード検索

 

最近の投稿

display:flexでレイアウト

  • Labs

Flexbox

こんにちは(・∀・)

以前Flexboxでレイアウトする方法についてご紹介したことがありますが、テンプレートとしてご紹介はしてきませんでした。それはやはりIEで使用することができないというのが一番の理由です。しかし、いよいよこの4月でWindows Vista(IE9)のサポートも終わります。Windows 7以降のブラウザはIE11となりますのでいよいよFlexboxでレイアウトすることができるようになるのです。

ということで改めて、この度Flexboxでのレイアウトテンプレートの公開という運びとなりました。

frameレイアウト・tableレイアウトからfloatレイアウトときていよいよFlexboxでのレイアウトとなります。CSSとブラウザの進化によりこれまでのfloatレイアウトが負のレガシーとなりIE6でのカラム落ちの対応に追われた日々を懐かしむようになることは間違いありません。

Flexboxでレイアウト

Flexboxでのレイアウトテンプレートです。レスポンシブデザインになっておりスマホサイト及びPCサイトという構造になります。スマホサイトは1カラムのベーシックなデザインになっており、基本的な構成は方向にheaderとflex-containerとfooterで親要素がflex-wrap-containerとなります。flex-containerは横方向の親要素になります。縦方向の親要素のflex-wrap-containerはfooterを画面下に固定させるために必要となります。flex-wrap-containerにdisplay:flex、flex-direction:column、headerとfooterには高さ固定でheightを指定、flex-containerにflex:autoを指定して縦方向の可変を実現します。footer固定が必要がなければそれらは必要ありませんので削除してください。また、footer固定にするとコンテンツ部分のflex-itemは画面の高さいっぱいにはならず一番大きいflex-itemの高さになりますので注意が必要です。方向は親要素flex-containerの中にflex-itemを並べています。

2カラムレイアウト

2カラムレイアウトのサンプルです。flex-containerの中にflex-itemを入れてレイアウトします。flex-containerに「display:flex」を指定します。flex-itemのサイドバー部分をサイズ固定、コンテンツ部分を可変にします。固定幅にするflex-itemに横幅の数値を指定して可変幅にするflex-itemに「flex:auto」を指定します。

サンプルデモ

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ

HTML

<body>
<div id="flex-wrap-container">
<header>
<h1>Webデザインラボ</h1>
</header>
<div id="flex-container-1">
<div id="flex-container-2">
<section id="flex-item-1">
<p>flex-item-1</p>
<!--flex-item-1--></section>
<section id="flex-item-2">
<p>flex-item-2</p>
<!--flex-item-2--></section>
<!--flex-container-2--></div>
<!--flex-container-1--></div>
<footer>
<div>&copy;WEB DESIGN LAB</div>
</footer>
<!--flex-wrap-container--></div>
</body>
CSS

html,body {
  height: 100%;
}
#flex-wrap-container {
  min-height: 100vh;
  height: 100%;
  display: flex;/*footer固定1/3*/
  flex-direction: column;/*footer固定2/3*/
}
header,section,footer {
  padding: 5px;
}
header {
  height: 50px;
  background: #aaa;
}
#flex-container-1 {
  flex: auto;/*footer固定3/3*/
}
  #flex-item-1 {
    background: #9fb7d4;
  }
  #flex-item-2 {
    background: #d49fc2;
  }
footer {
  height: 50px;
  background: #aaa;
}
@media (min-width: 768px) {
body {
  min-width: 1200px;
}
#flex-container-2 {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
  #flex-item-1 {
    margin: 0 10px;
    flex: auto;
    order: 2;
  }
  #flex-item-2 {
    flex: 0 0 300px;
    order: 1;
  }
/* ** */}

flex-wrap-containerが縦並びの親要素でflex-container-2が横並びの親要素です。flex-container-1とflex-container-2を兼用したいところですが、flex-container-1を省略するとflex-itemの高さが可変になりません。

Flexbox

3カラムレイアウト

3カラムレイアウトのサンプルです。flex-containerの中にflex-itemを入れてレイアウトします。flex-containerに「display:flex」を指定します。flex-itemのサイドバー部分をサイズ固定、コンテンツ部分を可変にします。固定幅にするflex-itemに横幅の数値を指定して可変幅にするflex-itemに「flex:auto」を指定します。

サンプルデモ

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ

HTML

<body>
<div id="flex-wrap-container">
<header>
<h1>Webデザインラボ</h1>
</header>
<div id="flex-container-1">
<div id="flex-container-2">
<section id="flex-item-1">
<p>flex-item-1</p>
<!--flex-item-1--></section>
<section id="flex-item-2">
<p>flex-item-2</p>
<!--flex-item-2--></section>
<section id="flex-item-3">
<p>flex-item-3</p>
<!--flex-item-3--></section>
<!--flex-container-2--></div>
<!--flex-container-1--></div>
<footer>
<div>&copy;WEB DESIGN LAB</div>
</footer>
<!--flex-wrap-container--></div>
</body>
CSS

html,body {
  height: 100%;
}
#flex-wrap-container {
  min-height: 100vh;
  height: 100%;
  display: flex;/*footer固定1/3*/
  flex-direction: column;/*footer固定2/3*/
}
header,section,footer {
  padding: 5px;
}
header {
  height: 50px;
  background: #aaa;
}
#flex-container-1 {
  flex: auto;/*footer固定3/3*/
}
  #flex-item-1 {
    background: #9fb7d4;
  }
  #flex-item-2 {
    background: #d49fc2;
  }
  #flex-item-3 {
    background: #ccc;
  }
footer {
  height: 50px;
  background: #aaa;
}
@media (min-width: 768px) {
body {
  min-width: 1200px;
}
#flex-container-2 {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
  #flex-item-1 {
    margin: 0 10px;
    flex: auto;
    order: 2;
  }
  #flex-item-2 {
    flex: 0 0 200px;
    order: 1;
  }
  #flex-item-3 {
    flex: 0 0 300px;
    order: 3;
  }
/* ** */}

こちらもflex-wrap-containerが縦並びの親要素でflex-container-2が横並びの親要素です。こちらも同じくflex-container-1とflex-container-2を兼用したいところですが、flex-container-1を省略するとflex-itemの高さが可変になりません。

Flexbox


どちらのサンプルもflex-containerの幅を1200pxで固定して中央に配置しておりますが、この横幅の指定をなくせば画面幅いっぱいのリキッドレイアウトになります。またflex-itemの「order」番号を変更すれば表示順も変更することができます。

関連リンク

display:flexについて【CSS3リファレンス】
display【CSSリファレンス】

  • カテゴリー:Labs