CSSのfloatを使わずに、Flexboxを使用してwebサイトを作った話

今回新規事業のサービス立ち上げに伴い、下記webサイトを作成しました。
[子供向けプログラミングスクール スタートプログラミング](https://www.start-programming.net/)

このサイトには[floatプロパティ](http://www.htmq.com/style/float.shtml)を一切使用していません。
Flexboxプロパティのみを使用し実装しました。
今回はこのFlexboxについて簡単にまとめてみました。

#Flexboxとは？
Flexbox(可変ボックス)とはCSS３から登場したレイアウトモジュールになります。
横並びを実現するだけではなく、上下中央揃えやレスポンシブ化も簡単に実装できます。

*[MDNのflexbox説明ページ](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)

## boxを並べてみる
実際にこの2つのボックスを並べてみました。

![スクリーンショット 2016-10-19 19.13.04.png](https://qiita-image-store.s3.amazonaws.com/0/108073/2a7dd0c5-0542-606b-bf59-a8de0876b562.png)


ソースコード

```html:index.html
<div>
    <ul class="parent">
        <li class="children">赤</li>
        <li class="children">青</li>
    </ul>
</div>

<style>
    /* 親要素にflexを指定 */
    .parent{
        display: flex;
    }
    /* 子要素は基本スタイルのみ */
    .children{
        color: #fff;
        width: 100px;
        height: 100px;
    }
    .children:nth-child(1){
        background-color: red;
    }
    .children:nth-child(2){
        background-color: blue;
    }
</style>
```

親要素に```display:flex```を指定しただけになります。
これで、子要素が可変ボックス(正確には```width```を指定しているので可変ではないです)になりました！
floatでは回りこみなども考えないといけないので、楽ですね。

## boxを均等に並べてみる
親要素に```width:300px```を指定し、子要素を300pxの中で均等に配置しました。
![スクリーンショット 2016-10-19 19.23.37.png](https://qiita-image-store.s3.amazonaws.com/0/108073/2acf9cb6-b433-6016-a384-78a997afb1d2.png)

ソースコード

```html:index.html
<div>
    <ul class="parent">
        <li class="children">赤</li>
        <li class="children">青</li>
    </ul>
</div>

<style>
    /* 親要素にflexを指定 */
    .parent{
        width: 300px;
        display: flex;
        justify-content: space-between;
    }
    /* 子要素は基本スタイルのみ */
    .children{
        color: #fff;
        width: 100px;
        height: 100px;
    }
    .children:nth-child(1){
        background-color: red;
    }
    .children:nth-child(2){
        background-color: blue;
    }
</style>
```

親要素に```width:300px```を指定し、幅を指定。
そのあとに、親要素に```justify-content: space-between;```を指定し、均等に配置しました。

この```justify-content```プロパティは非常に優秀で、以下の指定ができます。

- justify-content: space-between
均等に配置  

- justify-content: space-around
均等に配置し、先端・終端には余白を設ける

- justify-content: flex-start
左詰めで配置

- justify-content: justify-content: flex-end
右詰めで配置

- justify-content: center
中央に配置

## boxの中の文字を上下揃えにする
```position: absolute ```を使わずに、上下揃えを実装しました。
![スクリーンショット 2016-10-19 19.36.28.png](https://qiita-image-store.s3.amazonaws.com/0/108073/8201dcb3-0cf3-ac89-c019-3818f62f51fa.png)

ソースコード

```html:index.html
<div>
    <ul class="parent">
        <li class="children">赤</li>
        <li class="children">青</li>
    </ul>
</div>

<style>
    /* 親要素にflexを指定 */
    .parent{
        width: 300px;
        display: flex;
        justify-content: space-between;
    }
    .children{
        color: #fff;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
    }
    .children:nth-child(1){
        background-color: red;
    }
    .children:nth-child(2){
        background-color: blue;
    }
</style>
```

今まで子要素だった```children```が文字の親要素になるため```display: flex;```スタイルを付与しました。（クラス名が```children```なのに親要素になったのは華麗にスルーしてくださいw）
この```children```にもう一つ```align-items: center;```を実装するだけで、上下揃えが実装できます。
```position: absolute ```を使うと色々面倒なことになりますが、簡単に実装できました。

この```align-items```プロパティは他にも以下の指定ができます。

- align-items: center
上下中央に配置 

- align-items: stretch
親要素内いっぱいに表示

- align-items: flex-start
上揃えに配置

- align-items: flex-end
下揃えで配置

- align-items: baseline
ベースラインで配置

## boxの中の文字を上下左右中央揃えにする
```align-items``` と ```justify-content```を同時に使用して、文字を上下中央揃えにしました。
![スクリーンショット 2016-10-19 19.49.31.png](https://qiita-image-store.s3.amazonaws.com/0/108073/b21dca46-6ac3-9b06-d92a-8813092dc4cf.png)

ソースコード

```html:index.html
<div>
    <ul class="parent">
        <li class="children">赤</li>
        <li class="children">青</li>
    </ul>
</div>

<style>
    /* 親要素にflexを指定 */
    .parent{
        width: 300px;
        display: flex;
        justify-content: space-between;
    }
    .children{
        color: #fff;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .children:nth-child(1){
        background-color: red;
    }
    .children:nth-child(2){
        background-color: blue;
    }
</style>
```

上下揃えに使用した```align-items: center;```と左右中央揃えができる```justify-content: center```を同時に使用しました。
これでわずか数行で簡単に上下左右揃えができました！！

## ブラウザのサポート状況
ブラウザのサポートが確認できる[Can I Use](http://caniuse.com/#search=flex)ではこのようになっています。
![スクリーンショット 2016-10-19 19.55.05.png](https://qiita-image-store.s3.amazonaws.com/0/108073/b9fd27c9-88b8-4b8d-56cc-1f5d3bf7abc6.png)

IEが・・・となる方も中にはいらっしゃるかもしれませんが、一応[flexibility](https://github.com/jonathantneal/flexibility)を使用すれば動作します。
しかし、念をおしてIEの8,9に対応しないといけない場合は、諦めましょう。

正常なブラウザなら、ちゃんと動作しますが、念のためにベンダープレフィックスを付与するのが、懸命です。gulpなどを使用すれば、ベンダープレフィックスの実装が自動化できるので便利なものはどんどん使いましょう！！
[参考記事：CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入とお薦め設定](http://qiita.com/tonkotsuboy_com/items/377913c51b1ac00deffe)

# Flexboxを学ぶのにオススメのサイト
今回はFlexboxについて簡単に、説明させていただきました。
ですが、まだまだ便利な機能やプロパティがあり、きちんと勉強することで、バグの無い便利な実装ができます。
以下のサイトがオススメなので是非ご覧ください。

- [CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA](https://ics.media/entry/13117)

- [CSS3のFlexboxを基本から理解して、使い倒そう！ - LIG](https://liginc.co.jp/web/html-css/css/21024)

- [CSS Flexboxの勉強に最適！コピペですぐに使えるレイアウトやコンポーネントを実装するコードのまとめ - coliss](http://coliss.com/articles/build-websites/operation/css/flexbox-for-layout-and-compornent.html)

- [これからのCSSレイアウトはFlexboxで決まり！ - クリエイターボックス](http://www.webcreatorbox.com/tech/flexbox/)

Flecbox以外にも便利な物はたくさん出てきています。
フロントエンドの流行の流れはとても早いですが、便利ならどんどん採用して、開発効率をあげていくべきなので、是非今回Flexboxを初めて知った方は使用してみてください！