フレックスレイアウト仕上げノート

-webkit-ボックスを学びます

Postcss下位互換性を利用CSSコード、ディスプレイ：-webkit-ボックス：通常のフレックスディスプレイと互換性のあるコード。
携帯端末のカーネルの下の部分にのみフレックスレイアウトをサポートしていない、ボックスレイアウトの古いバージョンをサポートしています。
ボックスのレイアウトが自動的に折り返されます異なるフロートと、フレックスレイアウトの前身であるときの境界、ボックスの外フロートとしませんフレックス。

ボックスとフレックスの違い

容器部

サブ要素は親要素の幅の合計を超えて：
ボックス=>親要素のオーバーフロー境界の子要素
フレックス=>子要素が押され
、比較のために
：スピンドルが配置変更されたとき
|（タテ）：ボックス=> -webkit-ボックス・オリエント
フレックス=>フレックス方向：（行|コラム）
（同じ効果は、唯一の違いは、別の属性名ですが）
：順に配置
ボックス=> -webkit-ボックス方向：（通常|リバース）
フレックス=>フレックス方向（行逆|カラムリバース）
注：行逆にケースをフレックスの効果を逆転させます容器は、左端の容器から配置されている効果を逆転右端の開始、ボックス内に配置されているから、（比較参照）
スピンドル余剰スペースの管理：
ボックス=> -webkit-箱パック：
/ *スタート：右側の余剰スペース
/終了：左側の余剰スペース
/センター：両側に余剰スペース
/正当化;マージンは項目間のスペース
フレックス=>正当化します-content：
/左のフレックススタートの余剰スペース
/右のフレックスエンド余剰スペース
/両側に余剰スペースのセンター
/スペースの間で、スペースの周りに、スペース均等にプロジェクト間の余剰スペースの異なる形式*
サイドシャフト余白スペース管理：
ボックス=> -weblit-Boxの-ALIGN =左：
/ *開始：以下余白スペース
/センター：空きスペースの両側に
/終了：上記の余剰スペース
のFlex => =左のアイテムを揃える：
/フレックススタート：下の余白スペース
/センター：空きスペースの両側に
/ Flexのエンド：上記の余剰スペース
/ベースライン：ベースラインの
/ストレッチ：輪郭レイアウト*

**注：メインシャフトとサイドシャフトに対して4,5はX軸またはY軸に固定されていない**

アイテム（項目）セクション

張力と圧縮
箱=> -webkitボックスフレックス（両方の延伸を制御するには、圧縮を制御することができる）
フレックス=>成長フレックス（のみ制御延伸）、フレックス収縮（のみ圧縮制御）
幅設定
ボックス=>幅
幅よりフレックス=>幅やフレックス基礎、フレックスベースの優先順位

フレックス基盤レイアウト

基本的な概念を参照してください一度、フレックスレイアウトを取得し、ほとんどの属性ルールは、それが図2を参照して使用することができ、複雑ではありません。プロパティがあることに注意してくださいフレックス成長し、フレックス縮小。

フレックスが成長が計算されます

効果はのフレックス成長：空きスペースの主軸方向がある場合に、余白スペースは、対応する項目与えます
0：フレックス成長デフォルト
フレックス成長トリガ条件：長軸方向の余裕空間が存在する
計算空きスペースのためのフレックスは、成長：フレックスとして余剰スペースを数値-growを分配
：例
コンテンツ幅600PXは、4つの内部項目を有するフレックスレイアウト、項目初期幅それぞれは50px、100pxに、150ピクセル、200pxのであると仮定する。
最初の項目は、フレックスの成長である：4;
育てフレックス:. 1の4項目;
Q：それぞれ、幅項目番号4を求めていますか？
ソリューション：

余白スペース幅計算：
富余 = 600px - (50+100+150+200)px = 100px
フレックス成長幅の割り当ての単位：
单位flex-grow宽度 = 富余/(flex-grow总和) = 100px/(4+1) =20px
フレックス成長数値分布幅：
第1个item宽度 = 初始宽度 + 单位flex-grow宽度*flex值 = 50px + 20px*4 = 130px
第4个item宽度 = 初始宽度 + 单位flex-grow宽度*flex值 = 200px + 20px*1 = 220px
したがって、項目4の幅は130px、100pxに、150ピクセル、220pxです。あなたはできる例を参照してください

フレックスシュリンクが計算されます

フレックス収縮効果：容器はNOWRAPフレックスラップであり、アイテムが初期幅及び容器は、圧縮の間に決定アイテム、フレックス収縮ルールに圧縮され、前記容器の幅よりも大きいです。
屈曲収縮:. 1既定
フレックス収縮トリガー条件：容器の不足幅を、コンテンツ表示を圧縮する必要が
フレックス収縮計算値：

圧縮空間を計算
各項目の重量=フレックス収縮*幅、再配布権圧縮空間に応じて
アイテムが再割り当て空間圧縮を計算し、アイテムの幅が0であると仮定した場合、0の幅に圧縮する必要があるかどうか
**アイテムのコンテンツは、アイテムは、コンテンツの幅の最小幅まで圧縮される：注**

例：コンテンツの幅が300ピクセルであると仮定し、4つの内部項目を有するフレックスレイアウト、項目初期幅それぞれは50px、100pxに、150ピクセル、200pxの。
Q1：表示された4項目の実際の幅はどのくらいですか？
10に収縮フレックスのITEM1;
5にフレックスシュリンクITEM4;
Q2：どのくらいの幅4項目ですか？
ソリューション：
Q1：

圧縮空間幅の計算
压缩 = (50+100+150+200)px - 300px = 200px
圧縮空間の割り当て
4个item宽度比为1:2:3:4，初始flex-shrink为1
单位权重宽度 = 200px/(1*1+2*1+3*1+4*1) = 20px
第1个item宽度 = 初始宽度 - 单位权重宽度*权重 = 50px - 20px*1*1 = 30px
第2个item宽度 = 初始宽度 - 单位权重宽度*权重 = 100px - 20px*2*1 = 60px
第3个item宽度 = 初始宽度 - 单位权重宽度*权重 = 150px - 20px*3*1 = 90px
第4个item宽度 = 初始宽度 - 单位权重宽度*权重 = 200px - 20px*4*1 = 120px
再計算する必要
由于步骤2计算的item宽度都大于等于0，因此不需要重新计算
したがって、項目4の幅は30px、60PX、90PX、120ピクセルです。

Q2：

圧縮空間幅の計算
压缩 = (50+100+150+200)px - 300px = 200px
圧縮空間の割り当て
4个item宽度比为1:2:3:4，item1、item4的flex-shrink分别为10、5，其余flex-shrink为1
单位权重宽度 = 200px/(1*10+2*1+3*1+4*5) = 40/7px
第1个item宽度 = 初始宽度 - 单位权重宽度*权重 = 50px - 40/7px*1*10 = -7.14px
再計算する必要があります
由于第1个item计算后的宽度为-7.14px<0，因此需要重新分配压缩空间
圧縮空間幅の計算
由于上一步中item1宽度小于0，将item1宽度当作0，重新计算压缩空间宽度
压缩 = (100+150+200)px - 300px = 150px
圧縮空間の割り当て
单位权重宽度 = 150px/(2*1+3*1+4*5) = 6px
第1个item宽度 = 0
第2个item宽度 = 初始宽度 - 单位权重宽度*权重 = 100px - 6px*2*1 = 88px
第3个item宽度 = 初始宽度 - 单位权重宽度*权重 = 150px - 6px*3*1 = 132px
第4个item宽度 = 初始宽度 - 单位权重宽度*权重 = 200px - 6px*4*5 = 80px
再計算する必要
由于步骤5计算的宽度都大于等于0，因此不需要重新计算
したがって、項目4の幅は0,88px、132px、80pxです。することができます例が見
注：項目にテキストを追加した後、幅をゼロに圧縮することはできません、圧縮空間の計算はより複雑になります。