flex 标签

flex:flex-grow、flex-shrink、flex-basis的缩写;

flex-basis

该属性来设置该元素的宽度。当然，width也可以用来设置元素宽度。如果元素上同时设置了width和flex-basis,那么flex-basis会覆盖width的值。

flex-grow

当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间;

父元素宽400px，有两子元素：A和B。A宽为100px，B宽为200px。 则空余空间为 400-（100+200）= 100px。

A flex-grow:1，

B flex-grow:2。

A= 自身宽度（100px）+ A剩余空间的宽度（100px (1/(1+2))）,

B= 自身宽度（200px）+ B剩余空间的宽度（100px (2/(1+2))）

flex-shrink

当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。

父元素宽400px，有两子元素：A和B。A宽为200px，B宽为300px。B总共超出父元素的宽度为(200+300)- 400 = 100px。

A flex-grow:2;

B flex-grow:3;

A= 自身宽度（200px）- A减小的宽度(100px * (200px * 3/(200 * 3 + 300 * 2))) = 150px

B= 自身宽度（300px）- B减小的宽度(300px * (300px * 2/(200 * 3 + 300 * 2))) = 250px

 flex 的默认值是 0 1 auto