flexboxとは

flex-container

flex-item
flex-item
display: flex; を指定した外側要素をflex-container、その中にある各要素をflex-itemと呼びます。この状態では、flex-itemは横に並びます。

例)
.flex-container {
   display: flex;
}

水平方向の並べ方

flex-container

flex-item
flex-item
justify-contentというプロパティで水平方向の並び方を定義します。
図はflex-container側にjustify-content: center;を指定した時です。

例)
.flex-container {
   display: flex;
   justify-content: center;
}

flex-container

flex-item
flex-item
justify-content: space-between;の時。

例)
.flex-container {
   display: flex;
   justify-content: space-between;
}

垂直方向の並べ方

flex-container

flex-item
flex-item
align-itemsというプロパティで垂直方向の並び方を定義します。
図はflex-container側にalign-items: center;を指定した時です。

例)
.flex-container {
   display: flex;
   align-items: center;
}

flex-container

flex-item
flex-item
align-items: flex-end;の時。

例)
.flex-container {
   display: flex;
   align-items: flex-end;
}

折り返し

flex-container

flex-item
flex-item
flex-item
flex-item
このようなレイアウトを見た事ありませんか?これはflex-wrapというプロパティで折り返しを定義しています。このプロパティは、flex-itemの横幅の合計値がflex-containerをはみ出す場合の扱いを定義します。
flex-container側にflex-wrap: wrap; と指定する事で折り返しが起こるようになります。

例)
.flex-container {
   display: flex;
   flex-wrap: wrap;
}

flex-container

flex-item
flex-item
flex-item
flex-item
flex-wrapに指定がない場合、このようにcontainerに収まるようにitemが縮みます。 この時、itemのwidthの値は無視されます(本来33%で指定しているが、それよりも縮んでいる)。

実例集

画像のように、ロゴとナビメニューが並んでいる、ヘッダーによくあるレイアウト

.Header

Item
Item
Item
コード例(分かりやすさのため一部省略しています。全文はデベロッパーツールからご確認ください。)
また、itemの親要素が.Header-Navです。

.Header {
   width: 100%;
   display: flex;
   justify-content: space-between;
}

.Header-Logo {
   width: 100px;
}

.Header-Nav {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.Header-Nav-Item {
   margin-left: 10px;
   width: 50px;
   height: 100%;
}

一番外の要素がflexになり、中の要素をjustify-content: space-between;を使って左右に振り分けます。
右の.Header-Navはさらにdisplay: flex;で中の.Header-Nav-Itemを横並べにします。

画像のように、記事が一覧で並んでいるレイアウト

.Article

.Article-Card
.Article-Card
.Article-Card
.Article-Card
.Article-Card
.Article-Card
コード例(分かりやすさのため一部省略しています。全文はデベロッパーツールからご確認ください。)

.Article {
   width: 100%;
   padding: 20px;
   display: flex;
   flex-wrap: wrap;
}

.Article-Card {
   margin-bottom: 20px;
   width: 48%;
}

.Article-Card:nth-child(odd) {
   margin-right: 4%;
}

container側は折り返しを定義するflex-wrap: wrap;に。 itemの横幅は34%以上50%以下にすれば横に2つ収まります。
そして100%-2×(itemのwidth)の値を左側の要素にのみmargin-rightとして与えると綺麗に配置されます。