【CSS】よく使うFlexboxでのレイアウト

・コーポレートサイトなどでよくある、headerで、ロゴ要素だけ左端に置いて、他の要素は右端に並べるレイアウト。

（こういうレイアウト）
──────────────────────────────
ロゴ　　　会社概要　アクセス　お問い合わせ
──────────────────────────────

ul {
  display: flex;
}

li.logo {
  margin-right: auto;
}

・親にdisplay:flex;を指定。
・左端要素（ロゴ）に、margin-right:auto; を指定することで、右3つの要素との間のスペースをきっちり埋めてくれます。

・また以下のようなサイドバーがあるサイトのレイアウトでも、

──<aside>─|───────<main>───────
😐       ｜                  ｜
😐       ｜                  ｜
😐       ｜                  ｜
          ｜                  ｜
😈       ｜                  ｜
───────────────────────────────

最後の要素（😈）だけ一番下に設置したい時に、この要素にmargin-top: auto;をすれば同じように上に埋めてくれます。

flexbox結構長いこと使ってた割にこの手法は最近知りましたが…、このflexとmargin: auto;の組み合わせは強力ですね。
プロパティの記述がシンプルで、かつレスポンシブレイアウトで作る時も扱いやすいのが良いですね。

書いておきながら何ですが、こちらの記事がとても分かりやすいです。
coliss.com

また、同じ横並びなどGridレイアウトも、IE11を無視できる事が増えてきそうなので、積極的に使っていきたいです。