flexbox系のやつ、display:flex;くらいしか日常使いしてなかったので
この機会に...
flexboxコンテナ
flexboxコンテナ: flex-direction
「flex-direction」プロパティは、flexコンテナの主軸の方向を設定することにより、
flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。
flexboxコンテナ: flex-wrap
flexboxの初期のコンセプトは、1行に複数のアイテムをコンテナにセットすることです。
そこから進化し、「flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。
flexboxコンテナ: flex-flow
「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。
flexboxコンテナ: justify-content
「justify-content」プロパティは、flexコンテナの主軸に沿ってflexアイテムを一行に配置します。
flexboxコンテナ: align-items
flexアイテムはflexコンテナのクロス軸に垂直方向で配置することができます。「align-items」プロパティは、デフォルトで全てのflexアイテムを含めます。
flexboxコンテナ: align-content
「align-content」プロパティは「justify-content」と似ていますが、「align-content」プロパティはクロス軸の垂直方向に揃えて配置します。
flexboxアイテム
flexプロパティ
flexプロパティのショートハンドが、flex-grow、flex-shrink、flex-basisという３つのプロパティ。
flex-grow、flex-shrink、flex-basisを一括指定したい場合は『flexプロパティ』を使う。
flexboxアイテム: flex-grow
flex-growプロパティはflexアイテムの伸長係数（伸びる倍率）を設定するものです。
数字で指定します。
flexboxアイテム: flex-shrink
flex-shrinkプロパティはflexアイテムの縮短係数（縮む倍率）を設定するものです。
数字で指定します。
flexboxアイテム: flex-basis
flex-basisの基本的な使い方は、widthプロパティやheightプロパティと同じです。
各flexアイテムの幅をwidthで指定しても、別のプロパティで比率を指定している場合、widthの値が無視されます。
そういうときに幅を固定してくれるのが、このflex-basisプロパティです。
『flex-direction』が、row、row-reverseのときは『flex-basis』は横幅を指定します。
『flex-direction』でcolumnやcolumn-reverseのときは『flex-basis』は縦の長さを指定することになります。
値に指定できるのは単位を含めた数値と、初期値である『auto』です。
なお、負の値は指定できません。
flex: 1;の場合
上記の内容を踏まえて、以下の記述が省略されたもの
flex-grow: 1
flex-shrink: 1
flex-basis: 0
flexboxアイテム: align-self
「align-self」プロパティは、flexアイテムの整列を前述の「align-items」での指定より優先します。