CSSフレックスボックス

Flexbox（Flexboxを指定する）

Flexboxを指定するとその要素はFlexコンテナになります。
フレキシブルボックス
CSS3 Flexboxの各プロパティの使い方
CSS flexible box の利用

1. Flexboxを指定：親要素 {display:flex;}
2. インライン要素にFlexboxを指定：親要素 {display:inline-flex;}

Flexboxのバグ対策

ChromeとSafariではFlexboxの使用時に画像が正常に表示されない場合があるようです。
これはバグのようですが、こんな時は以下のようにすると改善できると思います。
対象の要素は子要素としてますが、画像の子要素が対象なら「親要素 img」としても可能です。
Flexboxでレイアウトした画像がChrome・Safariで表示されたりされなかったりするとき

子要素 {align-self:flex-start;}

CSSフレックスコンテナ

フレックスコンテナ（親要素）

フレックスコンテナはFlexboxを指定した要素の事です。

flex-direction（方向を指定する）

flex-directionは並べる方向を指定する事ができます。
flex-direction

1. 横並び（左→右）：親要素 {flex-direction:row;}
2. 横並び（右→左）：親要素 {flex-direction:row-reverse;}
3. 縦並び（上→下）：親要素 {flex-direction:column;}
4. 縦並び（下→上）：親要素 {flex-direction:column-reverse;}

flex-wrap（折り返しを指定する）

flex-wrapは折り返しを指定する事ができます。
flex-wrap

1. 折り返しなし：親要素 {flex-wrap:nowrap;}
2. 折り返す（複数行）：親要素 {flex-wrap:wrap;}
3. 逆方向に折り返す（複数行）：親要素 {flex-wrap:wrap-reverse;}

justify-content（主軸に沿って条件配置）

justify-contentは主軸に沿って様々な条件で配置する事ができます。
justify-content

1. 左寄せ配置：親要素 {justify-content:flex-start;}
2. 右寄せ配置：親要素 {justify-content:flex-end;}
3. 中央寄せ配置：親要素 {justify-content:center;}
4. 親要素に合わせて等間隔配置：親要素 {justify-content:space-between;}
5. 等間隔配置：親要素 {justify-content:space-around;}

align-items（交差軸に沿って条件配置）

align-itemsは交差軸に沿って様々な条件で配置する事ができます。
align-items

1. 縦幅に合わせる：親要素 {align-items:stretch;}
2. 始点配置：親要素 {align-items:flex-start;}
3. 終点配置：親要素 {align-items:flex-end;}
4. 中央配置：親要素 {align-items:flex-center;}
5. ベースライン配置：親要素 {align-items:baseline;}

align-content（複数行を対象に交差軸に沿って条件配置）

align-contentは複数行を対象に交差軸に沿って様々な条件で配置する事ができます。
align-content

1. 縦幅に合わせる：親要素 {align-content:stretch;}
2. 始点配置：親要素 {align-content:flex-start;}
3. 終点配置：親要素 {align-content:flex-end;}
4. 中央配置：親要素 {align-content:center;}
5. 親要素に合わせて等間隔配置：親要素 {align-content:space-between;}
6. 等間隔配置：親要素 {align-content:space-around;}

CSSフレックスアイテム

フレックスアイテム（子要素）

フレックスアイテムはフレックスコンテナの子要素に指定する事ができるものです。

order（表示順の指定）

orderは子要素の表示順を指定する事ができます。
数字が大きくなるほど下に配置されます。
order

親要素がフレックスコンテナである場合に有効

1. 一番上：子要素 {order:1;}
2. 中間：子要素 {order:2;}
3. 一番下：子要素 {order:3;}

flex-grow（伸び率を指定する）

flex-growは空きスペース内で特定の要素を伸ばす事ができます。
数字が大きくなるほど伸び幅が増えます。
flex-grow

親要素がフレックスコンテナである場合に有効

1. 通常：子要素 {flex-grow:1;}
2. より多くの伸ばす：子要素 {flex-grow:2;}
3. より多くの伸ばす：子要素 {flex-grow:3;}

flex-shrink（縮み率を指定する）

flex-shrinkは空きスペース内で特定の要素を縮める事ができます。
数字が大きくなるほど縮み幅が増えます。
flex-shrink

親要素がフレックスコンテナである場合に有効

1. 通常：子要素 {flex-shrink:1;}
2. より多くの縮む：子要素 {flex-shrink:2;}
3. より多くの縮む：子要素 {flex-shrink:3;}

flex-basis（横幅の基本サイズを指定）

flex-basisは子要素の横幅の基本サイズを指定する事ができます。
flex-basis

親要素がフレックスコンテナである場合に有効

1. 自動指定：子要素 {flex-basis:auto;}
2. pxで指定：子要素 {flex-basis:？px;}
3. %で指定：子要素 {flex-basis:？%;}

align-self（交差軸に沿って条件配置）

align-selfは交差軸に沿って様々な条件で配置する事ができます。
align-self

親要素がフレックスコンテナである場合に有効

1. 自動指定：子要素 {align-self:auto;}
2. 縦幅に合わせる：子要素 {align-self:stretch;}
3. 始点配置：子要素 {align-self:flex-start;}
4. 終点配置：子要素 {align-self:flex-end;}
5. 中央配置：子要素 {align-self:center;}
6. ベースライン配置：子要素 {align-self:baseline;}