[初投稿]CSS:FlexBoxレイアウトのチートシート

##前置き
初めての投稿になるので文章が拙い部分や意味を誤認識している部分もあるかと思います。お気付きのことがあればご指摘いただけると幸いです。

##概要
#####要素を簡単な記述で整列、配置が可能な為、mediaクエリを使用することでレスポンシブ対応が容易に可能になる便利なレイアウトです。（語彙力。。。）
詳しくは下記を参考にしてください。笑
###仕様
W3C公式ページをご覧ください。
日本語訳をしてくださっているページもありました。
###ブラウザの対応状況
こちらから最新の状態を確認してください。 2019.9.29現在はほぼ全てのブラウザで対応されています。
#用語
###flex-container
FlexBoxレイアウトを使用する範囲です。子要素には適用されますが孫要素に適用されないので注意が必要です。
###flex-items
コンテナの子要素です。FlexBoxレイアウトが適用されます。
###主軸(main-axis)
後述するflex-directionの設定方向であり、アイテムを整列させる方向です。。
デフォルトは行方向（横方向）になります。
###交差軸(cross-axis)
主軸と直角に交わる軸です。
image↓

#記述について
#####コンテナとアイテムで可能な宣言は以下の通りです。

宣言

/* 全てデフォルト値　*/
flex-container{
 flex-flow: row nowrap; /*アイテムの整列・折り返し: 横並び 折り返さない*/
 justify-content: normal; /*余白の指定: 規定の値*/
 align-items: stretch; /*交差軸方向の配置: */
 align-content:
}
flex-item{
 flex:none; /* アイテムをコンテナに収めるために、どのように伸長・収縮させるかを指定する。
　　　　　　　　　デフォルトではアイテムはwidth,heightの値で固定。 */
 order:0; /* 視覚的に配置を変更する　*/
}

下記でそれぞれの宣言について詳しく説明していきます。

#flex-container
以下、コンテナ側のプロパティについて詳細を説明していきます。
コンテナに設定できるプロパティは以下の通りです。
フレックスコンテナ内に宣言すると言う意味でコード上ではflex-container{}内でプロパティを紹介していきます。

flex-container

/* 全てデフォルト値　*/
flex-container{
 flex-flow: row nowrap; /*アイテムの整列・折り返し: 横並び 折り返さない*/
 justify-content: normal; /*余白の指定: 規定の値*/
 align-items: stretch; /*交差軸方向の配置: */
 align-content:
}

##flex-flow(アイテムの整列・折り返しの指定)
#####flex-directionとflex-wrapの一括指定プロパティです。
値の詳細は下記のflex-directionとflex-wrapに記します。
flex-directionとflex-wrapのそれぞれの値を使い指定します。

flex-flow: <'flex-direction'> || <'flex-wrap'>

デフォルト

flex-container{
 flex-flow:row nowrap;
}

###flex-direction(アイテムの整列)
#####アイテムの整列方向を指定します。 以下、各値の詳細

flex-direction

flex-container{
 flex-direction: row;  /* 行のテキストの方向に配置 */
 flex-direction: row-reverse;  /* <row> と同様だが、逆向き */
 flex-direction: column;  /* 列方向に配置する */
 flex-direction: column-reverse;  /* <column> と同様だが、逆向き */
}

###flex-wrap(アイテムの折り返し)
#####アイテムがコンテナから溢れる時、折り返すか押し込むかを指定するプロパティです。　以下、各値の詳細です。

flex-wrap

flex-container{
 flex-wrap: nowrap; /* 折り返しなし 押し込む*/
 flex-wrap: wrap; /* main-axis方向に折り返し*/
 flex-wrap: wrap-reverse; /* wrapと逆方向に折り返し */
}

##justify-content (主軸方向に余白がある時の整列を指定)
#####主軸方向に余白ができた時のアイテムの整列の仕方を指定する。

justify-content

flex-container{
/* 位置による配置 */
 justify-content: flex-start; /* 主軸方向の先頭に寄せる */
 justify-content: flex-end;   /* 主軸方向の末尾に寄せる */
 justify-content: center;   /* 主軸方向の中央に寄せる */
/* 均等配置 */
 justify-content: space-between; /* 両端のアイテムはコンテナに合わせて配置し、各アイテムを均等に配置 */
 justify-content: space-around;  /* 各アイテムを均等に配置し行の両端に半分の大きさの間隔を置く */
 justify-content: space-evenly;  /* 各アイテムを均等に配置し全てのアイテムに同じ大きさの間隔を置く */
 justify-content: stretch;       /* 各アイテムを均等に配置しサイズが 'auto' であるアイテムは、コンテナーに合わせて引き伸ばす */
}

##align-content(全ての要素で交差軸方向の配置)
#####交差軸方向の配置を全ての要素で指定します。justify-contentの交差軸版

align-content

flex-container{
/* 位置による配置 */
 align-content: flex-start; /* 交差軸方向の先頭に寄せる */
 align-content: flex-end;   /* 交差軸方向の末尾に寄せる */
/* 均等配置 */
 align-content: space-between; /* 両端のアイテムはコンテナに合わせて配置し、各アイテムを均等に配置 */
 align-content: space-around;  /* 各アイテムを均等に配置し行の両端に半分の大きさの間隔を置く */
 align-content: space-evenly;  /* 各アイテムを均等に配置し全てのアイテムに同じ大きさの間隔を置く */
 align-content: stretch;       /* 各アイテムを均等に配置しサイズが 'auto' であるアイテムは、コンテナーに合わせて引き伸ばす */
}

##align-items(行単位で交差軸方向の配置)
#####交差軸方向の配置を行単位で指定します。

align-items

flex-container{
  align-items: stretch; /*　制約の範囲内に収まるようサイズを変更する*/ 
 /* 位置による配置 main-axis方向の指定はないので注意*/ 
  align-items: center; /* アイテムを中央付近にまとめる */ 
  align-items: flex-start; /* 交差軸方向の先頭にまとめる */ 
  align-items: flex-end; /* 交差軸方向の末尾にまとめる */ 
}

#flex-items
以下、アイテム側のプロパティについて詳細を説明していきます。
アイテムに設定できるプロパティは以下の通りです。
フレックスアイテム内に宣言すると言う意味でコード上ではflex-item{}内でプロパティを紹介していきます。

flex-items

/* 全てデフォルト値　*/
flex-item{
 flex:none; /* アイテムをコンテナに収めるために、どのように伸長・収縮させるかを指定する。
　　　　　　　　　デフォルトではアイテムはwidth,heightの値で固定。 */
 order:0; /* 視覚的に配置を変更する　*/
}

##flex(アイテムをコンテナに収めるために、どのように伸長・収縮させるかを指定)
#####flex-grow,flex-shrink,flex-basisの一括指定プロパティです。値の数によって効果が異なります。
######値が一つの場合
単位無しの数値であればflex-grow、widthとして有効な値であればflex-basisとして扱われます。

flex:flex-grow | flex-shrink

######値が二つの場合
最初の値は単位無しで記述し、flex-growとして扱われます。２つ目の値は単位無しであればflex-shrink,widthとして有効な値であればflex-basisとして扱われます。

flex:flex-grow && flex-shriknk | flex-basis

######値が三つの場合
値はflex-grow,flex-shrink,flex-basisの順で記述し、flex-growとflex-shrinkは単位無しの数値flex-basisについてはwidthとして有効な値で記述します。

flex:flex-grow or flex-shrink

#####例外

flex例外

flex-item{
 flex:auto; /* flex: 1 1 auto コンテナに合うように伸縮をする*/
 flex:initial; /* flex: 0 1 auto コンテナに合うように縮小はするが引き伸ばさない。 */
}

-注意-
flex-grow,flex-shrink,flex-basisはそれぞれのプロパティと共に使用されるため、３つのプロパティが宣言されていることを保証するためflexで一括指定した方が良い
flex-growは与えられた比率が大きいほど引き伸ばされるためアイテムは大きくなるが、flex-shrinkは与えられた比率が小さいほど縮小されるためアイテムは小さくなる。

###flex-grow(コンテナに余裕がある時アイテムを引き延ばす比率)
#####コンテナに空間がある時に、**アイテムにどれだけの比率を配分するか(伸縮係数)**を記述する。
比率は他のアイテムに割り当てられている伸縮係数の合計の内、そのアイテムが締める伸縮係数の割合で配分される。
負の値を記述することはできない。

flex-grow: <number>;

###flex-shrink（コンテナに当てはまるようにアイテムを縮小する比率）
#####コンテナからアイテムがはみ出す時、どの程度の割合でアイテムを縮小するかを記述する。
負の値を記述することはできない。

flex-shrink: <number>;

###flex-basis（アイテムの初期サイズ）
#####アイテムの初期サイズを記述します。値はwidthに指定できるもの(px,emなどの絶対指定や%による指定)が使用できます。負の値の指定はできません。

flex-basis: <width>;

##align-self
#####flex-containerで指定できるaligin-itemsの値を上書きして指定することができます。使うことができる値はalign-itemsと同じです。

##order (視覚的な配置を変更する)
#####視覚的な見た目を変更します。値を整数値で指定し、数値が小さい順に並び替えられます。

order: <integer>;

order

flex-item{
 order:0; /* 数値が小さい順に視覚的に入れ替えられます */
}

order は要素の視覚上の順序にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。order を speech など、視覚的ではないメディアで使用してはいけません。

#ソース
####MDN