よくあるレイアウトのパターンを float から flex に置き換える

Vista終了のお知らせ

2017年4月11日、ついにマイクロソフト社の Windows Vistaのサポートが終了しました。それに伴って、悩みのタネであった、Internet Explore9, 10(以下IE9,IE10)のサポートも切れることになります。

というわけで、4月11日以降は心おきなく display: flex; が使えるようになります。

flex の各種ブラウザの対応状況・バグ

IE以外は緑です。

Can I Use ... Flexible Box Layout Module

チートシート

Webクリエイターボックス さんで、Flexboxのチートシートが配布されていたので紹介します。(ニュースレター配信の登録が必要になります。WebクリエイターボックスさんはMailChimp使ってるんですね。)

float → flex

良くあるパターンとして以下4つのfloat, flexでのコードを書いてみます。

メニュー

See the Pen Flex Menu by DesignChips (@DesignChips) on CodePen.

2カラムレイアウト

See the Pen 2column flex by DesignChips (@DesignChips) on CodePen.

html

<div class="container">
  <header class="header">
    <h1 class="heading">ヘッダー</h1>
  </header>
  <div class="flex">
    <main class="main">
      <h2 class="heading">メインコンテンツ</h2>
    </main>
    <aside class="aside">
      <h2 class="heading">サイドバー</h2>
    </aside>
  </div>
  <footer class="footer">
    <h2 class="heading">フッター</h2>
  </footer>
</div>

css

.container {
  width: 768px;
  margin: 0 auto;
}
.flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.header,
.main,
.aside,
footer {
  background-color: #eee;
}
.main,
.aside {
  height: 320px;
}
.main {
  width: 70%;
  margin: 0 15px 0 0;
}
.aside {
  width: 30%;
}
.heading {
  padding: 10px 15px;
}

3カラムレイアウト

See the Pen 3column flex by DesignChips (@DesignChips) on CodePen.

html

<div class="container">
  <header class="header">
    <h1 class="heading">ヘッダー</h1>
  </header>
  <div class="flex">
    <aside class="aside">
      <h2 class="heading">サイドバー</h2>
    </aside>
    <main class="main">
      <h2 class="heading">メインコンテンツ</h2>
    </main>
    <aside class="aside">
      <h2 class="heading">サイドバー</h2>
    </aside>
  </div>
  <footer class="footer">
    <h2 class="heading">フッター</h2>
  </footer>
</div>

css

.container {
  width: 768px;
  margin: 0 auto;
}
.flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.header,
.main,
.aside,
footer {
  background-color: #eee;
}
.main,
.aside {
  height: 320px;
}
.main {
  width: 60%;
  margin: 0 15px;
}
.aside {
  width: 20%;
}
.heading {
  padding: 10px 15px;
  font-size: 16px;
}

記事一覧とかでよくみるやつ

See the Pen flex articles by DesignChips (@DesignChips) on CodePen.

html

<div class="container">
  <h2>記事一覧</h2>
  <article class="article">
    <a href="" class="flex">
      <div class="article__image"></div>
      <div class="flex vertical-flex">
        <h3 class="article__title">記事タイトル</h3>
        <p class="article__description">記事の概要。記事の要約もしくは、本文の冒頭が入る場合が多いです。文字数が多くなる場合が多く、３点リーダーで続きがあることを示している場合が多いです。３点リーダーはサーバーサイドで処理されていたり、CSSで実装されていることが...</p>
        <div class="article__metadata">
          <time>2017.4.1</time>
          <span>DesignChips</span>
        </div>
      </div>
    </a>
  </article>
    <article class="article">
    <a href="" class="flex">
      <div class="article__image"></div>
      <div class="flex vertical-flex">
        <h3 class="article__title">記事タイトル</h3>
        <p class="article__description">記事の概要。記事の要約もしくは、本文の冒頭が入る場合が多いです。文字数が多くなる場合が多く、３点リーダーで続きがあることを示している場合が多いです。３点リーダーはサーバーサイドで処理されていたり、CSSで実装されていることが...</p>
        <div class="article__metadata">
          <time>2017.4.1</time>
          <span>DesignChips</span>
        </div>
      </div>
    </a>
  </article>
    <article class="article">
    <a href="" class="flex">
      <div class="article__image"></div>
      <div class="flex vertical-flex">
        <h3 class="article__title">記事タイトル</h3>
        <p class="article__description">記事の概要。記事の要約もしくは、本文の冒頭が入る場合が多いです。文字数が多くなる場合が多く、３点リーダーで続きがあることを示している場合が多いです。３点リーダーはサーバーサイドで処理されていたり、CSSで実装されていることが...</p>
        <div class="article__metadata">
          <time>2017.4.1</time>
          <span>DesignChips</span>
        </div>
      </div>
    </a>
  </article>
</div>

css

.container {
  width: 768px;
  margin: 0 auto;
}
.article {
  padding: 0 0 30px 0;
  margin: 0 0 30px 0;
  border-bottom: 1px solid #ddd;
}
.article__image {
  width: 160px;
  height: 120px;
  margin: 0 15px 0 0;
  background-color: #ddd;
  flex-shrink: 0;
}
.article__title {
  margin: 0;
  font-size: 18px;
}
.article__description {
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .5px;
}
.article__metadata {
  font-size: 14px;
  align-self: flex-end;
}

.flex {
  display: flex;
  flex-wrap: nowrap;
}
.vertical-flex {
  flex-flow: column;
}

flex で楽になったところ

floatで要素を並列に並べる際には、親の要素に回りこみを解除するための指定を.clearfixなどで指定していました。

.clearfixには要素の回りこみを解除する、以外の意味を持たず、デザイン上は不要なCSS指定でした。これがなくなることによって、HTMLの見通しが随分と良くなりました。

flex で大変になったところ

大変になったというわけではありませんが、flexを使用しても、要素を並べるためのブロック要素は依然として出てきます。

以下の例であれば、日付と投稿者を並べるためのブロック要素が必要になります。paddingやmarginなどを同時に使用する場合、構造的に意味を持たない要素のクラス名を考えないといけません。CSS設計を幾つか見てみましたが、どう命名すれば良いのかはまだまだ悩み中です。

index.html

<div class="flex">
  <div>タイトル</div>
  <div class="flex">
    <time>日付</time>
    <span>投稿者</span>
  </div>
</div>

flex の普及具合は？

実際にサイトで使われているところはまだそれほど多くないのではないでしょうか。ですが、CSSフレームワークは対応しているバージョンもあるので、これから実際のサイト上で目にすることも多くなるかもしれません。