flexboxの初期値

/*フレックスボックス（親要素）のデフォルト値*/
.flex-box {
display: flex;
/*以下が初期値*/
align-items: stretch;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
}
/*フレックスアイテム（子要素）のデフォルト値*/
.flex-item {
/*以下が初期値*/
flex-shrink: 1;
flex-grow: 0;
flex-basis: auto;
}

1. **align-items**: このプロパティは、フレックスコンテナの交差軸（行の場合は垂直軸、列の場合は水平軸）に沿ってアイテムをどのように配置するかを決定します。値には 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' などがあります。

2. **flex-flow**: このプロパティは `flex-direction` と `flex-wrap` のショートハンドです。つまり、アイテムが主軸に沿ってどの方向に配置され、コンテナを超えて折り返すかどうかを一度に設定できます。

3. **justify-content**: このプロパティは、フレックスコンテナの主軸（行の場合は水平軸、列の場合は垂直軸）に沿ってアイテムをどのように配置するかを決定します。値には 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' などがあります。

4. **align-content**: このプロパティは、flexアイテムを折り返したときに上下の配置や余白を指定するプロパティです。
折り返したflexアイテムの配置を決定するという性質上、flex-wrap: wrap; もしくは flex-wrap: wrap-reverse; の指定が必要です。
align-content が効かないときは、以下のような原因が考えられます。
・親要素（flexコンテナ）にdisplay: flex;が指定されていない
・flexアイテムを折り返す指定になっていない
・親要素に height が指定されていない

5. **flex-shrink**: このプロパティは、要素がフレックスコンテナ内で縮小する場合の比率を設定します。デフォルト値は1で、すべてのフレックスアイテムが同じ比率で縮小します。値が大きいほど、他のアイテムに比べてより多く縮小します。

3つのボックスがフレックスコンテナ内に配置されています。コンテナの幅は400pxで、各ボックスの初期幅は200pxです。しかし、これらのボックスはすべてコンテナに収まらないため、flex-shrinkプロパティが適用され、各ボックスが縮小します。
flex-shrinkの値が大きいほど、そのボックスは他のボックスよりも多く縮小します。したがって、この例では、「Box 3」は最も多く縮小し、「Box 1」は最も少なく縮小します。
アイテムの比率ではなく、不足しているスペースの分割比率ということでしょうか？
はい、その理解で正確です。`flex-shrink`の値は、不足しているスペースをどのように分割するかを決定します。具体的には、全てのフレックスアイテムの`flex-shrink`の値の合計に対するそのアイテムの比率を表し、その比率に基づいて各アイテムがどれだけ縮小するかが決まります。したがって、`flex-shrink`の値が1,2,3のアイテムがある場合、それぞれのアイテムは全体の縮小量の1/6、2/6、3/6を吸収します。これは、不足しているスペースの分割比率を表しています。

6. **flex-grow**: このプロパティは、フレックスアイテムがフレックスコンテナ内の余剰スペースをどの程度吸収するかを決定します。具体的には、全てのフレックスアイテムのflex-growの値の合計に対するそのアイテムの比率を表し、その比率に基づいて各アイテムがどれだけ拡大するかが決まります。