.flex-container {
display: flex; /* 子要素がflexアイテムになる */
display: inline-flex; /* インライン要素をflexアイテムにしたい場合 */
/* flexコンテナの主軸の方法を */
flex-direction: row /* 左から右の水平方向に設定する. default */
flex-direction: row-reverse /* 右から左の水平方向に設定する */
flex-direction: column /* 上から下の垂直方法に設定する */
flex-direction: column-reverse /* 下から上の垂直方向に設定する */
/* flexコンテナのwrap方法を指定 */
flex-wrap: nowrap; /* 複数のアイテムを1行に配置する. default */
flex-wrap: wrap; /* 必要に応じてflexアイテムを左から右、上から下に複数行に配置する */
flex-wrap: wrap-reverse; /* flexアイテムを左から右、下から上へ複数行に配置する */
/* flex-directionとflex-wrapをまとめて設定する */
flex-flow: <flex-direction> || <flex-wrap>;
flex-flow: row nowrap; /* default */
/* flexコンテナの主軸に剃ってflexアイテムを1行に配置する */
justify-content: flex-start; /* モードに従い、flexコンテナの左側に配置される. default */
justify-content: flex-end; /* モードに従い、flexコンテナの右側に配置される */
justify-content: center; /* flexコンテナの中央に配置される */
justify-content: space-between; /* 最初と最後のアイテムは端に、残りは等間隔で配置される */
justify-content: space-around; /* 等間隔のmarginを持ったアイテムが等間隔に配置される */
/* flexコンテナのクロス軸に垂直方向で配置する
align-items: stretch; /* flexアイテムはflexコンテナの高さ（または幅）いっぱいに配置される */
align-items: flex-start; /* flexアイテムはクロス軸の視点に配置される. 上側とか */
align-items: flex-end; /* flexアイテムはflexコンテナのクロス軸の終点に配置される. 下側とか */
align-items: center; /* flexアイテムはflexコンテナのクロス軸の中央に配置される */
align-items: baseline; /* flexアイテムはベースラインに沿って配置される. ベースラインはggr */
}
.flex-item {
/* flexアイテムの相対配置順位を指定する */
order: <integer>
/* フリーのポジティブなスペースがある場合、 */
/* flexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定する */
flex-grow: <number>;
flex-grow: 0; /* 伸長しない. default */
/* フリーのネガティブなスペースがある場合、 */
/* flexアイテムが他のflexアイテムと比較してどのくらい縮まるかを指定する */
flex-shrink: <number>;
flex-shrink: 0; /* オリジナルのサイズを維持する */
flex-shrink: 1; /* default */
/* flexアイテムの最初のメインとなるサイズを指定する */
flex-basis: auto | <width>;
flex-basis: 350px; /* デフォルトのサイズを350pxに指定する */
flex-basis: auto /* default */
/* flex-grow, flex-shrink, flex-basisを指定するショートハンド */
/* w3c推奨 */
flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
flex: 0 1 auto; /* default */
/* 個別のflexアイテムのalign-items値を指定する */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
align-self: auto; /* default */
}
