どうもユーキです。

最近は対応ブラウザもIE11未満は対象外となってきていることが多く、flexboxを使う機会も増えてきたため、メモとして残しておきたいと思います。
個人的によく使うものしかまとめてないです。

display: flex;（横並びにする）

横並びさせたい要素の親タグに以下を指定するだけです。これだけです。

display: flex;

See the Pen flexboxの使い方をまとめる1 by tnyk35 (@tnyk35) on CodePen.0

flex-direction（並び順を変える）

display: flex;を指定している要素に以下を追加すると変わります。

flex-direction: row; /* 左から右（デフォルト） */
flex-direction: row-reverse; /* 右から左 */
flex-direction: column; /* 上から下 */
flex-direction: column-reverse; /* 下から上 */

See the Pen flexboxの使い方をまとめる2 by tnyk35 (@tnyk35) on CodePen.0

flex-wrap（折り返しの指定）

display: flex;を指定している要素に以下を追加すると変わります。

flex-wrap: nowrap; /* 折り返さない（デフォルト） */
flex-wrap: wrap; /* 下に折り返す */
flex-wrap: wrap-reverse; /* 上に折り返す */

See the Pen flexboxの使い方をまとめる3 by tnyk35 (@tnyk35) on CodePen.0

flex-flow（並び順と折り返しを同時に指定）

flex-directionとflex-wrapを同時に指定できます。

flex-flow: [flex-direction] [flex-wrap];

order（並び順を指定）

要素の並び順を指定できます。

order: [num];

See the Pen flexboxの使い方をまとめる4 by tnyk35 (@tnyk35) on CodePen.0

justify-content（水平方向の配置指定）

justify-content: center; /* 中央寄せ */
justify-content: flex-start; /* 先頭寄せ */
justify-content: flex-end; /* 末尾寄せ */
justify-content: space-between; /* 両端にマージンを作らずに均等配置 */
justify-content: space-around;  /* 要素の両側に半分のマージンを作って均等配置 */
justify-content: space-evenly;  /* 要素の両側に同じ大きさのマージンを作って均等配置 */

See the Pen flexboxの使い方をまとめる5 by tnyk35 (@tnyk35) on CodePen.0

align-items（垂直方向の配置指定）

align-items: center; /* 天地中央寄せ */
align-items: flex-start; /* 天地先頭寄せ */
align-items: flex-end; /* 天地末尾寄せ */
align-items: stretch; /* 親要素に合わせて伸縮 */

See the Pen flexboxの使い方をまとめる6 by tnyk35 (@tnyk35) on CodePen.0

まとめ

個人的によく使うプロパティをまとめました。
その他、align-self、flex-grow、flex-shrink、flex-basis、flexとプロパティがありますが、かえって複雑になっちゃたりするのでほとんど使うことはないかなぁっとおもっております。

とはいえ、いままで横並びするなら、floatを使ったり、inline-blockやtable&table-cellを使う必要があったので結構手間がかかっていました。
かなり楽になったので、今まであまり使ったことが無い方は是非とも使ってみてください！