详解 flex:1 到底是什么

前言

flex布局在前端开发中是必不可少的，它打破了原来块级盒子自上向下排列的规则，使得开发者们可以更自由的排列盒子。flex:1相信大家在开发当中都没少写，但是它具体是什么意思相信很多人还不清楚，下面我们用通俗的话介绍下flex:1代表什么！！！

一、flex：1由哪些属性组合而成？

flex-grow : 1
flex-shrink : 1
flex-basis : auto

flex-grow：简单来说就是对父元素剩余空间的分配规则（默认值：0）

举例：父元素宽600px，子元素A宽100px，子元素B宽200px，父元素的剩余空间为300px

子元素A设置 flex-grow：1
子元素B设置 flex-grow：2
如下图:
子元素A的宽度为 ： (原先的宽) + (父元素剩余宽度) * (A元素占比 / A元素占比 + B元素占比)
100 + 300 * (1 / 1 + 2) = 200
子元素B的宽度为 ： (原先的宽) + (父元素剩余宽度) * (B元素占比 / A元素占比 + B元素占比)
200 + 300 * (2 / 1 + 2) = 400

---

flex-shrink：仅当子元素相加宽度之和 大于 弹性盒子的时候发生的收缩比 （默认值：1）

举例：父元素宽600px，子元素A宽400px，子元素B宽600px，超出父元素宽度400px

如下图:
子元素A的宽度为 ： (原先的宽) - (超出父元素的宽度) * (A元素宽度 / A元素宽度 + B元素宽度)

400 - 400 * (400 / 400 + 600) = 240
子元素B的宽度为 ： (原先的宽) - (超出父元素的宽度) * (B元素宽度 / A元素宽度 + B元素宽度)
600 - 400 * (400 / 400 + 600) = 360

 

---

flex-basis：简单来说就是盒子在主轴上的初始大小（默认值：auto）

举例：父元素宽600px
子元素A设置 flex-basis：100；width：200
子元素B设置width：400
如图：子元素A设置了flex-basis，宽度没有生效，子元素A的初始大小为100

原文链接：详解 flex:1 到底是什么