CSS Flex(整列)、Flex Container、Flex Items

1 Dレイアウト、Flex Container+Flex Items、整列

Flex Container

ツールバーの

: display,
flex-flow, flex-direction, flex-wrap,
justify-content,
align-content,
align-items

display

Flex Containerの画面出力(表示)特性flex:ブロック要素などのFlex Contenterの定義
blockと同様の特性を持ち、Flex属性のFlexコンテンツ間は垂直に並び、width : autoが自動的に最大値となる.inline-flex:Flex Contenter(行内要素など)の定義
Flex Containerはinlineと同じ特性を持っているので、デフォルトでは水平位置合わせで、水平と垂直の長さが最小です.

flex-direction

主軸の設定、水平/垂直位置合わせの設定
デフォルト、row:行軸(左->右)/水平
row-reverse:行軸(右->左)
column、column-reverse//垂直に関連する主軸は、通常ブロックの基礎として使用されません.

flex-wrap

Flex Itemsがバンドルされているかどうか(改行)、水平に位置合わせされていると仮定
デフォルト、nowrap:バンドルなし(改行).1行にすべての要素を埋め込んでシェイプをワープ
wrap:マルチライン

justify-content

主軸の位置合わせ
デフォルトでは、flex-start:Flex Itemsが始点に位置合わせ(x軸、水平位置合わせの左側)
flex-end:Flex Itemsを端点に位置合わせ(x軸、水平位置合わせ右側)
center:中央揃えFlex Items

align-content

交差軸のマルチライン位置合わせ方法は、水平位置合わせの場合は交差軸の位置合わせ方法であり、垂直位置合わせを意味します.この場合、flex-wrap : wrap;で、複数の行があり、位置合わせのために一定の余白がある必要があります.1本の線が効かない.
デフォルト、stretch:Flex Itemsを始点に位置合わせ
flex-start:Flex Itemsを始点に整列
flex-end:Flex Itemsと端点の位置合わせ
center:中央揃えFlex Items

align-items

交差軸の位置合わせ.これは、align-contentの利用率よりも高い単行ソート方法です.
デフォルト値、stretch:Flex Itemsを交差軸に延長
flex-start:Flex Itemsを各行の始点に整列
flex-end:Flex Itemsを各行の端点に整列
center:Flex Itemsを行ごとに中央揃え

Flex Items

ツールバーの

: order,
flex, flex-grow, flex-shrink, flex-basis,
align-self

order

html構造を変更することなく画面に出力される要素の順序を変更できる柔軟なItem順序
デフォルト、0:順序なし
数値:数値が小さいほど、ソートが早くなります.

flex-grow

Flex Itemの増加幅パーセント、幅マージンを埋めるために増加したパーセント
デフォルト0:成長率なし
数値:成長率

flex-shrink

Flex Itemの幅減少率
デフォルトでは、1:Flex Contenter幅の減算
数値:減少率

flex-shrink : 0;
/* 0으로 설정하는 경우 shrink가 안되고 크기 줄지 않음. container보다 크기가 크더라도 container 밖으로 item이 나옴. item의 크기 변형을 막을 수 있음*/

flex-basis

Flex Itemのスペース割り当て前のデフォルト幅
デフォルト、auto:要素の内容(内容)幅
単位:px、em、remなどの単位に指定
文字の先頭と文字の終点=要素が持つコンテンツのデフォルト幅

/* 요소의 크기를 글자와 상관없이 동일하게 설정하기*/
flex-grow : 1;
flex-basis: 0; /*기본 너비를 0으로 */