フレックスボックスメモ

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

  • 詳細　https://developer.mozilla.org/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container

• 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 で設定すると、フレックスアイテムはフレックスコンテナの中で同じ大きさになる。