flexbox（四）伸缩布局中的margin&伸缩性&主轴对齐方式

伸缩布局中的margin：

当使用flex属性计算伸缩项目的宽度的时候，为auto的margin会值为0

在主轴（main axis）方向

• 如剩余空间为正数，则剩余空间会被平均分配在拥有主轴方向auto margin(s)的flex元素之间。
• 如剩余空间为负数，则将主轴方向的auto margin(s)设定为‘0’。

在侧轴（cross axis）方向

• 如果拥有侧轴方向auto margins(s)的元素的outer cross size（计算时将auto margins(s)作‘0’计算）小于其所在的flex line的cross size，则将剩余空间平均分配给auto margin(s)。
• 否则，如果侧轴方向block-start或inline-start方向的margin为auto，则将其设定为‘0’。设置相对方向的margin值，使此元素的outer cross size等于其所在的flex line的cross size。

伸缩性

flex-grow 是扩展比率 默认为0
flex-shrink 是收缩比率 默认为1
flex-basis 伸缩基准值默认为auto，意味着伸缩基准值与元素的主轴长度属性值相同，如果省略该值，则默认为0.

第一种情况
flex-parent 是父级，而且他的宽度是固定为800px，不会改变；
开始设置子级flex属性；

flex-basis总和加起来为1000px； 那么 1000px > 800px (父级的宽度)；子元素势必要压缩；溢出了200px；

son1 = (flex-shrink) * flex-basis；
son2 = (flex-shrink) * flex-basis；
…..
sonN = (flex-shrink) * flex-basis；

如果flex-basis的总和加起来大于父级宽度，子级被压缩，最后的选择是flex-shrink来进行压缩计算
加权值 = son1 + son2 + …. + sonN；

那么压缩后的计算公式就是

压缩后宽度 w = (子元素flex-basis值 * (flex-shrink)/加权值) * 溢出值

所以最后的加权值是
1*200 + 2*300 + 3*500 = 2300px

son1的扩展量：(200 * 1/ 2300) * 200，即约等于17px；
son2的扩展量：(300 * 2/ 2300) * 200，即约等于52px；
son3的扩展量：(500 * 3/ 2300) * 200，即约等于130px；

最后son1、son2、son3，的实际宽度为：
200 – 16  = 184px；
300 – 52  = 248px；
500 – 230 = 370px；

第二种情况

上面的例子已经说明，继续看第二个例子，同样上面的例子，我们改下父级宽度为1200px;
flex-basis的总和为 1000px，小于父级宽度，将有200px的剩余宽度；
既然有剩余，我们就不要加权计算，剩余的宽度将根据flex-grow，值得总和进行百分比，那么200px就会根据份数比来分配剩余的空间；

剩余后宽度 w = (子元素flex-grow值 /所有子元素flex-grow的总和) * 剩余值

总分数为 total = 1 + 2 + 3；

son1的扩展量：(3/total) * 200，即约等于100px；
son2的扩展量：(2/total) * 200，即约等于67px；
son3的扩展量：(1/total) * 200，即约等于33px；

最后son1、son2、son3，的实际宽度为：
200 + 100 = 300px；
300 + 67 = 367px；
500 + 33 = 533px；

主轴对齐方式

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

 

该属性是控制在伸缩容器中当前行的主轴来对其伸缩项目的对齐方式的，他是在任何的伸缩长度变化和margin为auto布局解决完成之后再布局的。当该行的伸缩项目不变的时候或者自动伸缩变化已经达到最大值的时候 开始分配剩余空间，当伸缩项目溢出该行的时候，也会施加一些控制。

该属性的值和上一篇博客中伸缩行侧轴对齐一样，不再赘述。

参考：http://www.heibaipig.com/blog/?p=450