CSS-Flexbox

CSS-Grid がページを構成するエリアを設定するプロパティであることに対し、

CSS-Flexbox は、エリア内に存在するコンテナとコンテナ内のアイテムの並び順(折返し/上下中央揃え/拡縮）を指定するプロパティです。

```

コンテナのプロパティ

1. flex-flow... 2,3を同時指定出来るプロパティ

-2. flex-direction... アイテムの並び順（縦/横ならび、右から左から）

-3. flex-wrap... アイテムの折り返し

4. justify-content... グリッドを水平方向に、アイテムのまとまりを（左/右/中央揃え）、均等（左右余白なし/あり）

5. align-content... グリッドを垂直方向に、アイテムのまとまりを（上/下/中央揃え）、均等（上下余白なし/あり）

6. align-items... すべてのアイテムに対して、１行の垂直方向の位置（上/下/中央揃え）

アイテムのプロパティ

1. item-order... HTMLの実装順に関わらず並び順を指定できるプロパティ

2. align-self... 個々のアイテムに対して、１行の垂直方向の位置（上/下/中央揃え）

3. flex... 4,5,6 を同時指定できる

-4. flex-grow... 伸長率を指定

-5. flex-shrink... 縮小率を指定

-6. flex-basis... ベースの幅を%指定

```

注意点

垂直方向を指定する vertical-align が使えなくなる。代わりにコンテナプロパティの align-content か、アイテムプロパティの align-self を使用すること。