CSS3——弹性盒模型- flex-grow、flex-shrink、flex-basis

本文：flex的扩展属性及其应用

-----------------------分界线-----------------------

flex-grow：(用来瓜分父级宽度剩余的宽度，，默认值为0)

容器宽度为400px,子元素1的宽度为100px,子元素2的宽度为100px,子元素3的宽度为100px，总宽度为100 + 100 + 100 = 300px。容器还剩余100px，剩余的宽度需要被每个子元素根据自己设置的flex-grow进行瓜分，将容器填满。子元素1的flex-grow设置为1，子元素2flex-gorw设置为1，子元素3flex-gorw设置为2，子元素1瓜分的宽度为（100 * 1）/（100 * 1 + 100 * 1 + 100 * 2） * 100 = 25px，子元素1真实的宽度为100 + 25 = 125px。同理子元素2瓜分的宽度为（100*1）/（100*1 + 100* 1 + 100 * 2） * 100 = 25px，子元素的真实宽度为100 + 25 = 125px。子元素3瓜分的宽度为（100 * 2）/（100 * 2 + 100 * 1 + 100 * 2） * 100 = 50px，子元素3的真实宽度为100 + 50 = 150px。

flex-shrink：(用来吸收父级宽度超出的宽度，默认值为1)

容器的宽度为400px, 子元素1的宽度为250px，子元素2的宽度为150px，子元素3的宽度为100px，总的宽度为 250 + 150 + 100 = 500px。容器放不下，多出来的宽度需要被每个子元素根据自己设置的flex-shrink 进行吸收。子元素1的flex-shrink: 1(未设置默认为1)，子元素2 flex-shrink: 2，子元素3 flex-shrink: 2。子元素1需要吸收的的宽度为 (250 * 1)/(250 * 1 + 150 * 2 + 100 * 2) * 100 = 33.33px，子元素1真实的宽度为 250 - 33.33 = 216.67px。同理子元素2吸收的空间为(150 * 2) / (250 * 1 + 150 * 2 + 100 * 2) * 100 = 40px，子元素2真实宽度为 150 - 40 = 110px。子元素3吸收的宽度为(100 * 2)/(250 * 1 + 150 * 2 + 100 * 2) * 100 = 26.67px，真实的宽度为100 - 26.67 = 73.33px。