Flexコンテナ（親要素)
flex-direction 子要素の並ぶ方向
- row 左から右へ並ぶ(default)
- row-reverse 右から左へ並ぶ
- column 上から下へ並ぶ
- column-reverse 下から上へ並ぶ
flex-wrap 子要素の折り返し
- nowrap 折り返さない(default)
- wrap 下へ折り返す
- wrap-reverse 上へ折り返す
flex-flow flex-directionとflex-wrapをまとめて指定
justify-content 水平方向の位置
- flex-start 先頭寄り(default) ※rowの場合は左、columnの場合は上
- flex-end 末尾寄り ※rowの場合は右、columnの場合は下
- center 中央寄り
- space-between 各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる
- space-around 各アイテムを均等に配置し各アイテムの両側に半分の大きさの間隔を置く
align-items 包含ブロック内のアイテムの配置
- stretch (default)
- flex-start フレックスアイテムを先頭にまとめる
- flex-end フレックスアイテムを末尾にまとめる
- center アイテムを中央にまとめる
- baseline ベースラインに配置
align-content 上下左右方向にアイテムの間隔を設定
- stretch (default)
- flex-start フレックスアイテムを先頭に寄せる
- flex-end フレックスアイテムを末尾に寄せる
- center アイテムを中央に寄せる
- space-between アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる
- space-around アイテムを均等に配置し各アイテムの両側に半分の大きさの間隔を置く
Flexアイテム（子要素）
- order 順序の指定
- flex-grow 子要素の伸びる比率
- flex-shrink 子要素の縮む比率
- flex-basis 子要素のベースとなる幅の指定
- flex flex-grow、flex-shrink、flex-basisをまとめて指定
- align-self 子要素の垂直方向の揃え