Flexboxという夢のようなものが、徐々にモダンブラウザで安定した実装を行えるようになってきたということで、使い方の簡単なまとめをメモ。

参考：これからのCSSレイアウトはFlexboxで決まり！

基本の使い方

<div id="header">
    <ul class="nav">
        <li class="logo"><a href="./">ロゴマーク</a></li>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
        <li><a href="#">メニュー4</a></li>
        <li><a href="#">メニュー5</a></li>
    </ul>
</div>

普通の構成のHTMLです。ロゴのみ左、他は右寄せというレイアウトにする場合、このHTMLではfloatやalignでゴリゴリに組まないと実現できませんでした。
しかし、Flexboxを使うと、下記CSSでそれが実現できます。

#header {

    .nav {
        padding:0;
        margin:0;
        display:flex;　←【１】

        li {
            padding:0;
            margin:0;
            list-style:none;

            a {
                display:block;
                padding:10px;
                margin:10px;
                background:#666;
                color:#fff;
            }
            &.logo {
                margin-right:auto;　←【２】

                a {
                background:blue;
                }
            }
        }
    }
}

ポイントは２つあります。

【１】display:flex;

横並びにしたい要素の「親」要素に対して指定します。
この場合、liを横並びにしたいので、その親であるulに指定します。
display:flex;のみでは、子要素は左寄せで横並び表示されます。

【２】margin-right:auto;

今回の場合は、ロゴのみ左寄せ、他は右寄せという条件でしたが、その場合は左寄せにしたい要素に対して、margin-right:auto;を指定します。
するとそれまで全てが左寄せだった子要素が、指定を加えられた要素のみ左になり、他は右寄せになりました。

他にも縦中央配置、高さ揃えなど従来の組み方では実現するのに大変だったレイアウトがFlexboxでは数行追加するだけで実現できます。