フレックスボックス

並べる方向を決める

コンテナに指定

横

display: flex;
flex-flow: row;

縦

display: flex;
flex-flow: column;

サイズ

アイテムに指定

伸縮

flex: 1 1 auto;

固定

flex: 0 0 幅px;

位置

コンテナに指定

　横並び

　　横方向

右寄せ

justify-content: flex-end;

中央寄せ

justify-content: center;

均等配置

justify-content: space-around;

justify-content: space-between;

先頭だけ左寄せ

先頭アイテムに指定

margin-right: auto;

末尾だけ右寄せ

末尾アイテムに指定

margin-left: auto;

　　縦方向

中央寄せ

align-items: center;