対応ブラウザや、仕様も固まったきたこともあり「display:flex;」を使うことも多くなりました。（IE8の案件に取り組んでいますが・・・）
今回はよく使うflexを使ったレイアウトと、コピペ用のコードを使ってflexを簡単に理解して使えるようにします。

flexの基本

display:flex;は、親ボックスのCSSに記載します。
親ボックスのCSSにflexを記載することで、子ボックスが横並びになります。

.oya {
 display:-webkit-flex; /* safari */
 display:flex; }
 .ko {
 /* 基本的には不要です */
 }

小ボックスを折り返す

このままでは、小ボックスが親ボックスを飛び出してしまいますので、折り返す必要があります。
「flex-wrap:wrap」を追記して子ボックスが折り返すようにします。
つまり、「display:flex」と「flex-wrap:wrap」はセットで使うことがほとんどです。

.oya {
 display:-webkit-flex; /* safari */
 display:flex;
 
 /*折り返し*/
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
}

簡単にflexを使うコピペコード

flex boxを使えるコピペ用のコードです。
flex boxを使うセレクタにコピペして、あとは不要なプロパティを削除して使います。

.oya {
 display:-webkit-flex; /* safari */
 display:flex;
 
 /*折り返し*/
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 
 /*左揃え*/
 -webkit-justify-content: flex-start;
 justify-content: flex-start;
 /*センター*/
 -webkit-justify-content: center;
 justify-content: center;
 /*右揃え*/
 -webkit-justify-content: flex-end;
 justify-content: flex-end;
 
 /*最初と最後を端にして等間隔*/
 -webkit-justify-content: space-between;
 justify-content: space-between;
 /*等間隔*/
 -webkit-justify-content: space-around;
 justify-content: space-around;

 /*中央配置 複数行でも中央、高さ違いは上部に合わせる*/
 -webkit-align-content: center;
 align-content: center;
 /*中央配置 複数行では分割して中央、高さ違いは中央に合わせる*/
 -webkit-align-items: center;
 align-items: center;
 /*ベースライン 複数行では分割してベースラインに合わせる*/
 -webkit-align-items: baseline;
 align-items: baseline; 

 /*下配置 複数行でも下、高さ違いは上部に合わせる*/
 -webkit-align-content: flex-end;
 align-content: flex-end;
 /*中央配置 複数行では分割して下、高さ違いは下に合わせる*/
 -webkit-align-items: flex-end;
 align-items: flex-end;
 
 /*下配置 複数行でも下、右寄りになる*/
 -webkit-justify-content: flex-end;
 justify-content: flex-end;
 -webkit-align-content: flex-end;
 align-content: flex-end;
}

下記のように不要なプロパティを削除すると、センターを適用することができます。

[myphp file="mod-ad"]

左・センタリング・右の並び

中央や右並びは、よく使うflexプロパティになります。

左揃え

特に記載しなくもてよいですが、小ボックスが左揃えになります。

.oya {
 display:-webkit-flex; /* safari */
 display:flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 /*左揃え*/
 -webkit-justify-content: flex-start;
 justify-content: flex-start;
}

センタリング

.oya {
 display:-webkit-flex; /* safari */
 display:flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 /*センター*/
 -webkit-justify-content: center;
 justify-content: center;
}

右揃え

.oya {
 display:-webkit-flex; /* safari */
 display:flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 /*右揃え*/
 -webkit-justify-content: flex-end;
 justify-content: flex-end;
}

等間隔のレイアウト

最初と最後の子ボックスが端に配置されて等間隔に表示

一行の最初と最後（ピンクのボックス）が端に配置されて、等間隔に表示されます。

.oya {
 display:-webkit-flex; /* safari */
 display:flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 /*最初と最後を端にして等間隔*/
 -webkit-justify-content: space-between;
 justify-content: space-between;
}

[myphp file="mod-ad"]

等間隔に表示

そのまま等間隔に表示されます。

.oya {
 display:-webkit-flex; /* safari */
 display:flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 /*等間隔*/
 -webkit-justify-content: space-around;
 justify-content: space-around;
}

中央（ミドル）の配置

中央配置には「align-content:center;」と「align-items:center;」「align-items:baseline;」が使えます。
小ボックスが一行だけで、ボックスの高さが同じであれば、下記のように表示されます。

子ボックスの高さがバラバラであったり、複数行になるとレイアウトが変わってきます。

align-content:center;を使った場合

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
 /*中央配置*/
-webkit-align-content: center;
align-content: center;
}

複数行の場合

align-content:centerは、中央（ミドル）に配置されます。

ボックスの高さが違う場合

子ボックスは、ボックスの上部に合わせて、中央に配置されます。
小ボックスに上下左右のマージンを設定すると、ブログの記事一覧などのボックスレイアウトに使いやすいですね。

align-items:center;を使った場合

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
 /*中央配置*/
-webkit-align-items: center;
align-items: center;
}

複数行の場合

行ごとに分割されて、その中央に配置されます。

ボックスの高さが違う場合

小ボックスは、中央に合わせて配置されます。
高さが違うアイテム（画像やボックス）が並べられたカールセルに使えそうですね。

align-items:baseline;を使った場合

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
 /*中央配置*/
-webkit-align-items: baseline;
align-items: baseline;
}

複数行の場合

行ごとに分割されて、尚且つベースラインに合わせられて上部に配置されるようです。

ボックスの高さが違う場合

ボックスのベースラインが計算されて２行目にも影響されていくようです。

下の配置

下に配置する場合もいくつかのプロパティがあります。

align-content: flex-end;を使った場合

下に配置されます。子ボックスの高さが違う場合は小ボックスの上部に合わせられます。

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
 /*下配置*/
-webkit-align-content: flex-end;
align-content: flex-end;
}

align-items: flex-end;を使った場合

複数行の場合は、行数分を分割して下に配置されます。写真の横下にキャプションを配置するレイアウトに使えますね。

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
 /*下配置*/
-webkit-align-items: flex-end;
align-items: flex-end;
}

justify-content:flex-end;とalign-content: flex-end;を使った場合

flexはプロパティを掛け合わせることもできます。掛けあわせるプロパティによって色々なレイアウトが実現できます。
justify-content:flex-end;とalign-content: flex-end;を使うと下記のレイアウトになります。

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
 /*下配置で右寄り*/
 -webkit-justify-content: flex-end;
 justify-content: flex-end;
 -webkit-align-content: flex-end;
 align-content: flex-end;
}

他にも、小ボックスを逆から並べたりするプロパティなども存在しますので、flexマスターを目指す方は参考サイトをご覧ください。