Flexレイアウト(3:Flex計算規則)
前言
flex計算規則
(一)基本概念
フレキシブルボックスの計算に関連するプロパティは、次のとおりです.
(二)子箱が親容器より小さい場合
flexコンテナ各行の幅=各サブコンテナの幅+サブエレメント対応軸のmargin値
flex-grow(サブボックスの伸び値)
flex-growが明らかにした値は0で、伸びは現れません
flex-growが示す値は0ではなく、サブボックスのflex-basis(またはwidth)値の和<コンテナのpaddingの左境界から右境界までの値です.サブボックスは、宣言されたflex-grow値に基づいて残りのスペースを割り当てます.
例を挙げてみましょう
箱の幅を分けることができます
に注意 flex-basisの属性が設定されていない場合、すなわちflex-basis:0である場合、フレキシブルボックスは、余分な空間またはオーバーフロー空間の幅を計算するのは、widthの値に基づいており、widthが設定されていない場合、その内容の幅 である. flex-basisの属性値とwidthの値が同時に設定されている場合、widthの値 は無視されます. flex-basisはパーセンテージとして設定することができ、祖先がdisplay:flexと明記した要素に対して である.
いくつかの長期休暇のflex値:
flex:1 ->> flex : 1 1 0%; flex: none ->> flex: 0 0 auto; flex: auto ->> flex: 1 1 auto; flex: 0 auto; またはflex:initial-->>flex:0 1 auto;すなわちflexの初期値
flex計算規則
(一)基本概念
フレキシブルボックスの計算に関連するプロパティは、次のとおりです.
margin:
flex-grow: , 0
flex-shrink: , 1
flex-basis: , (main size)。
flex: flex-grow, flex-shrink flex-basis , 0 1 auto。 。
(二)子箱が親容器より小さい場合
flexコンテナ各行の幅=各サブコンテナの幅+サブエレメント対応軸のmargin値
flex-grow(サブボックスの伸び値)
flex-growが明らかにした値は0で、伸びは現れません
flex-growが示す値は0ではなく、サブボックスのflex-basis(またはwidth)値の和<コンテナのpaddingの左境界から右境界までの値です.サブボックスは、宣言されたflex-grow値に基づいて残りのスペースを割り当てます.
例を挙げてみましょう
test
上面代码中,我们定义了外层容器width为400px,但是第二个margin为100px。现在flex-basis 属性值为0, 剩下空间为300px。则根据每个盒子flex-grow 属性值及其权重来分配剩余空间
.first宽度 300 *(1/6) = 50px
.second宽度 300 * (2/6) = 100px
.third 宽度 300 *(3/6) = 150
(二)当子盒子超过父容器
- flex-basis(子盒子的基准值)
可以代替申明width属性
同时声明width属性和flex-basis属性时,会以flex-basis的值来计算
当flex-basis属性值为0,在width有申明的情况下以width来计,width没有的申明的话,则按其内容来计。
- flex-shrink(子盒子的缩小值)
当flex-shirk的值不为0,且子盒子的flex-basis(或width)值之和 > 容器的padding的左边界到右边界的值。那么子盒子会根据申明的flex-shirk值去缩小当前子盒子的空间。
test
上面代码, 父容器定义宽度200px,因为flex-basis可替代width属性的。
所以,子项目宽度为 (200+40+40)= 280px,溢出了80px。
首先计算加上权重的值:1*40 + 3 * 200 + 2 * 40 = 720 px
.first :(40 * 1/720) * 80 = 4.44px
.second :(200 * 3/720) * 80 = 66.67px
.first :(40 * 2/720) * 80 = 8.89px
箱の幅を分けることができます
35.56px 133.33px 31.11px
に注意
いくつかの長期休暇のflex値:
flex:1 ->> flex : 1 1 0%; flex: none ->> flex: 0 0 auto; flex: auto ->> flex: 1 1 auto; flex: 0 auto; またはflex:initial-->>flex:0 1 auto;すなわちflexの初期値