flex布局中flex-basis|flex-grow|flex-shrink
整个才是正确的算法
flex-basis（基准值）
可以设置flex布局中容器的宽度，如果同时存在width属性，将把它给覆盖！
它也是计算flex-grow和flex-shrink的基准值，默认值是auto；
flex-grow（扩展比例）
当flex-item的总宽度小于容器时，flex-grow设置为0（默认值），那么他将不安比例来均分剩余的空间；
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .flex-container{ width:400px; background:red; display:flex; /* 总的空间空间长度400px flex-item：100+100=200 child1分得的空间：=(1/3)*200=66.7 child1最终的宽度：=flex-basis+66.7=166.666666666（近似值） 同理可以计算 child2的值： */ } .flex-item:nth-child(1){ flex-basis:100px;/*flex-basis将覆盖width的属性值滴呀*/ background:black; width:200px; flex-grow:1; } .flex-item:nth-child(2){ flex-basis:100px; background:green; flex-grow:2; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div> </body> </html>
效果：
flex-shrink（收缩比例）
默认值为1；（ps：收缩比例的算法和扩展算法是不一样的呢！）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .flex-container{ width:400px; background:red; display:flex; border:1px solid red; /* 超出的空间:400-(400+200)=-200; child要减去的空间:(1/3)*200=66.66 最总的空间值:400-66.6=333.4(这种算法是错误滴呀) 正确的算法： 超出空间：400-(400+200)=-200; 加权总和：400*1+200*2=800; child1被移除的比例:400*1/800*200=100 child1的最终宽度:400-100=300 同理可以求child2 */ } .flex-item:nth-child(1){ flex-basis:400px;/*flex-basis将覆盖width的属性值滴呀*/ background:black; flex-shrink:1; } .flex-item:nth-child(2){ flex-basis:200px; background:green; flex-shrink:2; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div> </body> </html>
收缩前后对比：
flex:flex-grow | flex-shrink | flex-basis
默认值：0 1 auto；
无论flex-item被填充的多款，只要我们设置
.flex-item:nth-child(1){flex:1}
.flex-item:nth-child(2){flex:2}
.flex-item:nth-child(1){flex:1}
它是将整个容器分成：1:2:1了，
如果我们这样设置：
.flex-item{flex:1},空间将均分，是整个容器空间，而不是多余的空间；
如果你加上了flex-basis，那么计算就更为复杂！