CSS flexbox

1. display

ほとんどの要素のレイアウト構成では、表示プロパティを使用して、垂直構成で水平レイアウトをより簡単に実現できます.
display: flex;
ブロック要素の構成を簡単に、迅速に、水平に実施します.

2. flex-direction

flex containerの重要な概念の一つはAxis(軸)である.
どの軸を基準に並べ替えたかを決定するプロパティがflex-directionです.
デフォルト値はrowで、column垂直スタック要素を使用できます.
row-reverse、row-columnなどの作成時に、要素は逆方向にアレイ順序を実行できます.

3. flex-wrap

要素の複数行セット(改行)のプロパティを設定できます.
要素の全長が親要素の幅より大きい場合は、次の行に配置して、より良い効果を得ます.

flex-wrap : wrap

flex-wrap: wrap-reverse

4. justify-content

メインシャフト(main-axis)の位置合わせとアイテム間の間隔を設定します.
flex-direction:行、x軸
flex-direction:columnの場合y軸
デフォルトはflex-startです.

5. align-items

交差軸(cross-axis)の位置合わせを設定します.
flex-direction:rowの場合y軸
flex-direction:columnの場合x軸
デフォルトはalign-items:stretchです.
各要素のフォントサイズまたは行間隔が異なる場合、ベースライン属性として指定すると、要素の埋め込み文字列に基づいてソートされます.

5-1. align-content

複数行の要素が整列されている場合は、中に全体として配置されます.

align-content: center

6. flex

要素の幅(増分、減算、デフォルト)を設定します.
flex:幅を増やして幅を減らします.デフォルトの幅を減らします.

6-1 flex-grow

これらの要素を同じ幅にし、画面をよりコンパクトにするには、それらを使用します.

6-2. flex-shrink

ウィンドウが小さくなると、要素は固定値に小さくなりません.
デフォルトはflex-schrif:0で、数値が高いほどウィンドウが小さくなります.

6-3. flex-basis

flex-growは内部要素の余白を公平にn分の1に分割し、内部内容の長さが同じflex-grow:1によって異なる幅を実現することもできる
この場合、プロパティをflex-base:0に設定すると、エレメントの幅を統一できます.すなわち、各エレメントのマージン設定が同じになり、バランスのとれた配置が実現されます.
特定の値を指定することもできます.