FLEXBOX FROGGYをクリアしたのでやりながらまとめたものを貼ります．
Flexboxはここでやった部分しかしりませんが，これだけでも便利ですね．

コンテナ全体

• justify-content 水平方向への寄せなど
  • flex-start: 左寄せ
  • flex-end: 右寄せ
  • center: 中央寄せ
  • space-between: 要素間にスペースを入れる
  • space-around: 要素の前後にスペースを入れる
• align-content 垂直方向への寄せなど
  • flex-start 上寄せ
  • flex-end 下寄せ
  • center 中央寄せ
  • space-between: 要素間にスペースを入れる
  • space-around: 要素の前後にスペースを入れる
• align-items
  • flex-start: 上部に表示
  • flex-end: 下部に表示
  • center: 上下の中央に表示
  • baseline: コンテナのベースラインに表示
  • stretch: よくわからない
• flex-direction (先頭の方向を変えるのでjustify-content, align-itemsの挙動が変わる)
  • row: 左から右に並べる
  • row-reverse: 右から左に並べる
  • column: 上から下に並べる
  • column-reverse: 下から上に並べる
• flex-wrap
  • nowrap: 一行で表示
  • wrap: 行端までいくと新たに行を追加して表示する
  • wrap-reverse: 反対から表示し，行端までいけば新たに行を追加して表示する
• flex-flow
  • flex-directionとflex-wrapを同時に使える．値はスペスで区切って書く．

個別の要素に対して

• order
  • 現在位置を 0 として順番をずらす．一つ後ろにずらすなら1,一つ前なら-1.
• align-self
  • 垂直方向の位置を変える．コマンドはalign-itemsと同じ.