エラストマーフレックスシュリンクのボックスモデルのプロパティ

最後の時間の後、我々は、フレックスが成長の特定の使用について調べる必要があります。今週、私たちはどのようなフレックス基礎このプロパティを参照するために協力しましょう。フレックスシュリンク

減速比が前提で領域が不足していることをプロジェクト、1のデフォルト値、ノートを定義し、プロジェクトが減少します。0で、削減されていません。

次の例は、プロパティで定義されていませんが、スペースのコンテナーアウトを満たすために、プロジェクトがデフォルトを削減します。
画像のキャプション

:プロジェクトの割合1,2,3,4,5に変更をフレックスは、成長すると

画像のキャプション

(我々は計算ので、フレームの大きさを無視し、ここで)次のように計算:
ボックスの幅と400ピクセルアイテムの全体の幅は、100 + 100 + 100 + 100 +である 100 = 500pxなど、 過剰なスペースである500-400px = 100ピクセル例えば、アイテム1が低減されていない、減速比が1つの項目2で、次いで、項目3は縮尺2である項目4縮尺3である、項目5には低下しません。そのような過剰は100pxに2、3、4ダイジェスト、比が1であることを:2:3。それでは、どのよう我々はそれを計算するのですか?

各項目の最初wdith値がフレックス収縮値直交、を乗じた
(* 1 100)= 100:2
3:(* 2 100)= 200
4:(* 100 3)= 300
、その後、すべての項目を合計します製品。
(100 + 200 + 300)= 600で
あっても共有要求に過剰空間後乗じました。
:(600分の100)×100 = 16.66
B:(200/600)×100 = 33.33
C:(600分の300)* 100 = 50
の後にスペースを減少させるために残りの空間のそれぞれを差し引いた
A:(100 - 16.66)= 83.34
B:(100から33.33)= 66.67
C:、(100 - 50)= 50
ウェルので、計算結果の幅こと。

だから、フレックスシュリンク我々はまた、非常に一般的である弾性レイアウトを使用し、学生のほとんどが狭い後の値を計算する方法を具体的に明確にする必要がある場合、このプロパティを..

今のところフレックスシュリンクを計算する方法の質問はどのように、非常に明確ではありません、まだ^ - ^。

(上海Shangxue唐フロントエンドのトレーニング元、してください懸念HTML5 + CSS技術は、後に乾燥を提供します)

おすすめ

転載: www.cnblogs.com/homehtml/p/12202468.html