前提

Flexbox使える使えるってよく聞きますが、
実際の案件のどういった場面で使えるのかがピンときていない人のために（主に私）。

Flexboxの各プロパティ

コリスさんにとても詳しく書いてあります。よく見てます。
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

各プロパティはわかった。でもそれがそんなに便利なの？？

ヘッダーのロゴとナビゲーションを左右に振り分ける

ロゴは左、ナビゲーションは右に振り分けるときに使う。
（引用）flexbox[CSS3]で実践的なレイアウトを。実際の現場で使うflexboxの4パターン
こちらの例では、
コンテナに justify-content: flex-end;、左に寄せたいロゴにmargin-right: auto;をつけているけど、
コンテナに justify-content: space-between;で左右に振り分けてもよいのでは？

画像＋テキストを画像を左右交互に並べるとき

HTMLは画像→テキストの順番で作っておいて、
コンテナにflex-direction: row-reverse;　で
奇数又は偶数のときに並びを入れ替える
（引用）flexbox[CSS3]で実践的なレイアウトを。実際の現場で使うflexboxの4パターン

HTMLの順序と表示順序を変える

PCでは真ん中メインだけどSPではメインを一番上に持っていきたい場合や、
真ん中のコンテンツだけど、HTMLでは最初に書きたい場合に。
order: 1;
order: 2;
など順番を付与するとできる。
-1とかも指定できる！

input+横についているボタンの高さ揃え

きれいに高さ揃えたいときに便利。
（引用）Solved by Flexbox

グリッドシステム

等幅コンテンツなら、幅を指定せずにflexアイテムを突っ込むだけ。
幅を指定したいなら、そこだけwidthを指定すればよいだけ。
1/2,1/4,1/4レイアウトも簡単！
（引用）Solved by Flexbox

縦方向もめっちゃ使える。
flex-direction: column;が活躍する場面を知らなかった。

ボタンを右下に配置する場合

画像＋（テキスト＋ボタン）のときに、ボタンを画像の下揃えにしたいとき、
その上のテキストとボタンを縦のflexboxにして、
ボタンの指定をalign-self: flex-end;にすると、下に寄る。
（引用）css3のflexboxを使うとすごい簡単になるレイアウトを試してみた

ページが短いときにフッターをウィンドウ枠の下揃えにする

高さが不明のときもOK！！！！
（引用）Solved by Flexbox
ページ上に書いてある記述と、ソースと、Githubのソースが違うけど、、たぶんできるのかな？

(参考)

コリスさんになんでも載ってる。
[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ
 これが知りたかった！よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル