Flexboxについて。。。その1
コンテナ（親要素）
アイテム（子要素）
に分けられる。<ul><li>でも可。
コンテナにdisplay:flexを指定する。
■■■■■並び順（flex-direction）■■■■■
（デフォルト）左から右
flex-direction: row;
右から左
flex-direction: row-reverse;
上から下
flex-direction: column;
下から上
flex-direction: column-reverse;
■■■■■単一行と複数行の指定
（flex-wrap、プレフィックス版含む）■■■■■
（デフォルト）単一行に配置、アイテムは幅に収まるように縮小
flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
複数行に配置、左から右へ、上から下へ、の順番
flex-wrap: wrap;
-ms-flex-wrap: wrap;
複数行に配置、左から右へ、下から上へ、の順番に。
flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
■■■■■上記の二つ、並びと単一・複数行を一緒に定義
（flex-flow、プレフィックス版含む）■■■■■
flex-directionスペースflex-wrap
flex-flow: row nowrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
■■■■■寄せと間隔
（justify-content、プレフィックス版含む）■■■■■
（デフォルト）アイテムを先頭に寄せて配置
justify-content: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
アイテムを後尾に寄せて配置
justify-content: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
アイテムを中央に寄せて配置
justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
先頭と後尾は端に、残りは等間隔に配置
justify-content: space-between;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔
justify-content: space-around;
-ms-flex-pack: distribute;
すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔
justify-content: space-evenly;
すべてのアイテムを等間隔に配置。サイズがautoであるアイテムはコンテナに合わせて引き延ばす
justify-content: stretch;