Flex and Flex-Item

What is Flex?

Flexは、要素をWebページに配置して誕生した機能です.
基本的にFlexはcontainerとitemからなる.

Container:Flexに設定する親要素として、子要素は基本的に水平に配列されています.

Item:Containerのすべてのサブエレメントが自動的にFlex itemに設定されます.

Flex Conatinerの主な属性と概念

Flex Wrap:コンテナの1行領域でアイテムがオーバーフローしないように、アイテムを複数行に配置するかどうかを決定するプロパティです.
デフォルトでは、

Flex Itemのサイズは、コンテナ内の最初の行にあるflex-sliftによって決定されます.

のデフォルト値はno-wrapで、プロジェクトを最初の行に並べます.

Main axis:flex-directionに応じて、Itemを整列させる基準方向として使用します.
videf-contentalign-contentalign-itemsスピンドルを使用してアイテムを整列させる複数行のプロパティについては、wrapプロパティを設定してアイテムを交差軸に整列させる必要があります.11行の交差軸に項目を位置合わせするプロパティ

Flex-方向によって主軸、交差軸は常に異なるので、交差軸=y軸で背負わないでください.

★★flex-item★★

Flexは主に水平ソートに使用され、itemプロパティは無視されるかもしれませんが、itemプロパティもlayoutと同じように重要です!

Flex itemの初期属性はflex:01 auto
flex-growflex-shrikflex-basisdefault value 01 Autovisibleアクションブラウザのサイズが大きくなると、リアクションXブラウザのサイズが小さくなり、リアクションOの通常widthと同じ動作になりますが、インラインの改行は発生しません.アイテムが大きくなると、コンテンツコンテナ
Flex grow:コンテナ内の残りの領域に対するアイテムの割合を指定するプロパティです.
注意、

width=container%の形でitemにwidthを割り当てるわけではありません!

Flex Shirnk:アイテムのサイズがコンテナの領域より大きい場合は、アイテムのサイズを小さくしてオーバーフローを回避できます.
growとshriftは大きさそのものではなく、スケールを設定しています!

Flex Basice:Flex Itemのサイズを決める属性で、動作はwidthに似ています.

Priority : flex-basis -> width -> content

flex-basesのサイズはflex-directionに依存します!->direction=colの場合、widthではなくheightはflex-basesの割り当て値を取得します.

Flex Item Property with example

1)Flexに設定した場合、初期アイテムは上のように同じ列でソートされません.

flex:01 autoなので、プロジェクトはコンテンツサイズに応じてスペースを占有します.

各要素はブロックレベルであるが、コンテナ1行のすべてのサイズを占有しない.これは、Flexがアイテムのコンテンツサイズ(正確にはmax-contentを参照)に基づいて領域を割り当て、flex-shillを適用するためである.

各要素にはflex-shirnkが適用され、上記の図に示すようにプロジェクトの実際のサイズを計算および割り当てます.

Flex Itemを同じ列幅にする方法は大きく2つあります.
各

Itemにはflex:1宣言

があります.

flex_container > * { flex-basis: 100% }

<その他の例>

.child { flex: 1 }
.child:last-child { flex: 3; background-color: green;  }

flex-grow:3は緑(3 rd)を採用していますが、2列目のコンテンツサイズのためflex-growは正常に動作していないように見えます.

ですが、flex-growはコンテナ割当項目のパーセントではなく、残りの領域割当項目のパーセントに基づいているため、2-childが占めるコンテンツサイズは上記の結果になります.

width vs flex-basis

Widthは要素幅を指定する属性であり、Flex Baseも基本的にwidthと同じである.

正確にはflex-basicは要素の幅ではなく、flex-directionに基づいて主軸の幅を設定します!

direction:列には、要素の高さがflex-based設定の値に変更されていることがわかります.

のみで、Heightプロパティの操作は少し異なります.

Height propertyはflex-sriskで正常に動作しません.したがって、flex-directionがcolumnの場合、flex-basicを使用してflex-sriftに従って操作することが望ましい.

flex:1掘り出しましょう!

flex-growflex-shrinkflex-basis110 (not auto!!)

Flex growthは1であり、これは容器内部に1の幅を割り当てることを意味する.

flex-収縮値1がデフォルトです.

flex-basesは0なので、実際のアイテムのサイズは0です!(注意Default in autoではありません!)しかしflex-growは指定した幅でitemのサイズを増やします!(下図参照)

Result:Itemは、容器をオーバーフローしない範囲でgrowの割合で残りの領域を占めます.

Think Flex as abbrivation of "Flexible"

コメントサイト

Flex Item Works More Complicated than you think

以上の資料へのYoutubeビデオリンク

Flexのデフォルト属性

Understand flex-grow, shirnk, basis

difference between flex-basis and width

How to set Flex-items same width _ Flex_container > * {flex-basis: 100%}

CSS Trick Flex Guide