今回新規事業のサービス立ち上げに伴い、下記webサイトを作成しました。
子供向けプログラミングスクールスタートプログラミング

このサイトにはfloatプロパティを一切使用していません。
Flexboxプロパティのみを使用し実装しました。
今回はこのFlexboxについて簡単にまとめてみました。

Flexboxとは？

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

boxを並べてみる

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

ソースコード

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の中で均等に配置しました。

ソースコード

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を使わずに、上下揃えを実装しました。

ソースコード

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を同時に使用して、文字を上下中央揃えにしました。

ソースコード

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ではこのようになっています。

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

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

Flexboxを学ぶのにオススメのサイト

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

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

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

Flexboxとは？

boxを並べてみる

boxを均等に並べてみる

boxの中の文字を上下揃えにする

boxの中の文字を上下左右中央揃えにする

ブラウザのサポート状況

Flexboxを学ぶのにオススメのサイト