フレックスボックスメモ
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
フレックスコンテナに設定するプロパティ
display: flex
子要素はフレックスコンテナにならないので、子要素もフレックスコンテナにしたい場合は子要素にも設定が必要
flex-direction
初期値：row
プロパティ値：row / row-reverse / column / column-reverse
主軸の方向を設定
主軸の方向にフレックスアイテムが並ぶ
align-items
初期値：stretch
プロパティ値：stretch / flex-start / flex-end / center
交差軸におけるアイテムの位置合わせ
主軸がrowの場合、縦方向のの基準となる位置を決める
justify-content
初期値：flex-start
プロパティ値： flex-start / flex-end / center / space-around / space-between / space-evenly
flex-wrap
初期値： nowrap
プロパティ値：wrap / nowrap
フレックスアイテムがあふれる場合、複数行に折り返して表示させる
wrap：アイテムが一行で表示するには大きすぎる場合には、新たな行に折り返される
nowrap：アイテムの収縮を許可するので、アイテムはコンテナーに合うように収縮される
flex-flow
flex-direction と flex-wrap の 2 つのプロパティを同時に指定する。
最初に指定される値が flex-direction で、2 つ目の値が flex-wrap
フレックスアイテムに設定するプロパティ
flex-basis
初期値：auto
フレックスアイテムの寸法を設定
そのアイテムの寸法を、使用しない余白は分配可能な余白として残すように定義します。このプロパティの初期値は auto で、この設定ではブラウザーはアイテムに寸法が設定されているかを確認します。すべてのアイテムが 100 ピクセルの幅に設定されている場合、これが flex-basis として使われます。
アイテムに寸法が設定されていない場合は、その内容の大きさが flex-basis として使われます。display: flex を親要素に設定するだけで、すべてのフレックスアイテムがそのアイテムの内容を表示するのに必要な余白のみを使用して行の中に整列していたのは、この挙動のためです。
プロパティ値を０に設定した場合、アイテムの大きさは均等になる。
flex-grow
フレックスコンテナの余白の分配を設定
flex-grow プロパティを正の整数に設定すると、フレックスアイテムは主軸に沿って flex-basis 以上に引き伸ばすことができます。これによって、アイテムが主軸上の分配可能な余白をすべて使うまで引き伸ばされるか、他のアイテムも引き伸ばし可能であれば、分配可能な余白の割合となります。
すべてのアイテムの flex-grow に 1 を設定すると、分配可能な余白はアイテム間で均等に分配され、主軸方向にコンテナーを埋めるように引き伸ばされます。
flex-grow プロパティは割合で余白を分配するために使うことができます。3つのアイテムのうち最初のアイテムの flex-grow に 2 を設定し、ほかのアイテムには 1 を設定した場合、最初のアイテムに 2/4 が与えられ、残りの 2 つのアイテムに 1/4 ずつが与えられ、余白を埋めます。
flex-shrink
フレックスコンテナの余白の取り上げ方を設定
値が大きいほどフレックスアイテムの縮小スピードが大きくなる
flex-grow プロパティが主軸上の余白の追加を扱う一方で、flex-shrink は余白の取りあげ方を制御します。 アイテムを配置するのに十分な余白がコンテナーになく、flex-shrink に正の整数が設定されていれば、アイテムは flex-basis よりも小さくなります。flex-grow と同様に、あるアイテムの収縮するスピードを他のアイテムより早くするために、異なる値を設定することができます。 つまり flex-shrink により大きな値が設定されているアイテムは、他のより小さな値が設定されている兄弟要素よりも早く収縮します。
flex
flexプロパティの一括設定
flex-grow、flex-shrink、flex-basisの順で設定する
flex: 1 1 0 で設定すると、フレックスアイテムはフレックスコンテナの中で同じ大きさになる。