CSS>Flexレイアウトにおける拡大と縮小の計算

原文:https://dev.opera.com/articles/flexbox-basics/
本文は原文の中でflex属性の値を計算する方法についてのみ簡単に翻訳します.Flexレイアウトに関するその他の知識は本論文では検討しない.
2015.2.5更新:flexの異なる採値状況及びflex-basisの採値意義について、この問題に対する私の回答を参照してください.http://segmentfault.com/q/1010000004080910/a-1020000004100314
あなたの元素を伸縮させます.
伸縮箱の最も強力な特性は、伸縮性のあるストリーム方向のサブ要素の長さ(flex-flowがrowであれば、長さはwidthであり、flex-flowがcolumnであれば、heightを指す)を伸縮性のある量にすることができ、この長さは、伸縮性ストリーム中の親要素の利用可能な空き容量に応じて変化する.この特性はflex属性を用いて実現され、この属性の値は3つの部分から構成される.これらの部分を一つずつ加えて、その影響を観察しましょう.まず、「伸縮増幅係数flex grow factor」があります.

#first {flex: 1;}
#second {flex: 1;}
#third {flex: 1;}

これらの単位値は比例として使用されます.各サブ要素は親要素のどれぐらいの利用可能な空間を占めるべきかを規定しています.すべて1に設定すると、伸縮箱の各サブ要素は等しく設定されます.このサブ要素に2の値を割り当てると、他のサブ要素の2倍の空間を占めることになる.

#first {flex: 1;}
#second {flex: 2;}
#third {flex: 1;}

例えば、各サブ要素に対して、伸縮基準値flex basisを設定しても良いです.

#first {flex: 1 200px;}
#second {flex: 2 300px;}
#third {flex: 1 250px;}

まず、伸縮流方向に応じて、各サブ要素の幅や高さに伸縮基準値を適用します.次に、伸縮増幅係数に基づいて、親要素内の残りの空間をサブ要素に割り当て、サブ要素の最終幅を求める.これにより、合計750 pxの場合、サブ要素の主軸方向のサイズは200 px、300 px、250 pxとなる.親容器の主軸方向が950 pxの場合、200 px以上をサブ要素に割り当てます.第一および第三のサブ要素はそれぞれ50 pxに割り当てられています.その伸び縮み係数は1で、それらの最終サイズはそれぞれ250 pxと300 pxです.第二のサブ要素は、伸び縮み係数が2であるので、100 pxに割り当てられる.その最終サイズは400 pxです.flexの第三部分の値は少ないですが、念のために見てみます.また、あなたのサブ要素に「伸縮縮係数flex shrink factor」を与えることができます.

#first {flex: 1 1 400px;}
#second {flex: 2 3 600px;}
#third {flex: 1 2 400px;}

伸縮収縮係数は、名称はそうであるが、正の値である.すなわち、上記の声明の中の第二の単位なし値である.親容器が主軸から溢れ出る時だけ有効です.これらも比例値としていますが、「オーバーフロー量」の割合を規定しています.オーバーフロー量は各サブ要素のサイズから差し引かれます.これによって、サブ要素の総サイズが親要素のサイズと同じになるようになります.実際にオーバーフローを阻止します.
主軸上の1100 pxの親容器を考えます.これは、上の子要素が父容器300 px(子要素が主軸上にある合計1400 px)に溢れ出ることをもたらします.サブ要素には伸縮収縮係数が設定されているため、

第1のサブ要素は、オーバーフロー量の1／6、すなわち50 pxを除去する.その計算値は従って350 pxとなる.

第2のサブ要素は、オーバーフロー量の3／6、すなわち150 pxを除去する.その計算値は450 pxになります.

第3のサブ要素は、オーバーフロー量の2／6、すなわち100 pxを除去する.その計算値は300 pxになります.

そのため、伸縮収縮係数が高いほど、素子が小さくなります.