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


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

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


## flex の各種ブラウザの対応状況・バグ
IE以外は緑です。

[Can I Use ... Flexible Box Layout Module](http://caniuse.com/#search=flex)


## チートシート

[Webクリエイターボックス](http://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet/) さんで、Flexboxのチートシートが配布されていたので紹介します。(ニュースレター配信の登録が必要になります。WebクリエイターボックスさんはMailChimp使ってるんですね。)

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

### メニュー
<p data-height="265" data-theme-id="dark" data-slug-hash="PpXGWR" data-default-tab="html,result" data-user="DesignChips" data-embed-version="2" data-pen-title="Flex Menu" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/DesignChips/pen/PpXGWR/">Flex Menu</a> by DesignChips (<a href="http://codepen.io/DesignChips">@DesignChips</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>


### 2カラムレイアウト
<p data-height="265" data-theme-id="0" data-slug-hash="RVPxOx" data-default-tab="result" data-user="DesignChips" data-embed-version="2" data-pen-title="2column flex" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/DesignChips/pen/RVPxOx/">2column flex</a> by DesignChips (<a href="http://codepen.io/DesignChips">@DesignChips</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

```html: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: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カラムレイアウト
<p data-height="265" data-theme-id="0" data-slug-hash="KmpZjj" data-default-tab="result" data-user="DesignChips" data-embed-version="2" data-pen-title="3column flex" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/DesignChips/pen/KmpZjj/">3column flex</a> by DesignChips (<a href="http://codepen.io/DesignChips">@DesignChips</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

```html: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: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;
}
```

### 記事一覧とかでよくみるやつ
<p data-height="265" data-theme-id="0" data-slug-hash="mmJpNx" data-default-tab="result" data-user="DesignChips" data-embed-version="2" data-pen-title="flex articles" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/DesignChips/pen/mmJpNx/">flex articles</a> by DesignChips (<a href="http://codepen.io/DesignChips">@DesignChips</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

```html: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: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 で楽になったところ

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

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

## flex で大変になったところ

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

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


```html:index.html

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

```


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