弹性盒布局2(写在子元素上的属性)

以下属性是写在子元素身上的: 

 一、flex-grow(自动分配填满父元素剩余的空间,按比率分配剩余空间,默认值为0,不进行分配,不允许负值)

 

 

 

 

计算方式:300-(80+160)=60

box1最终的宽度:60*(1/2)+80=110

box2最终的宽度:60*(1/2)+160=190

二、flex-shrink(自动缩减超出父元素的空间;默认值为1,自动将超出父元素的部分进行缩减;)

 

 flex-grow和flex-shrink的计算对比

三、flex-basis(定义子元素的宽度,可用长度length和百分比来定义宽度,不允许负值;默认值为auto,取决于原来的宽度)

 

 

 按1:1:6:1:1的情况按照flex-shrink的计算规则进行计算

四、复合属性

 

 

 

五、order

 

 

六、align-self(用于设置弹性子元素单独自身在侧轴方向上的对齐方式)

 

 

 h没加任何属性和auto(a),stretch(g)都一样

e和f按照文字基线baseline来对齐

原文地址:https://www.cnblogs.com/zqlym/p/13610283.html