详解flexbox中的flex属性

以前用flexbox布局都是简单的使用，总是有一些细节懵懵懂懂，本文通过公式的形式来探究flexbox中的flex属性，以下纯属个人理解，如有理解错误之处，欢迎指出。

以下讲解当做你已经了解flexbox是什么，如不了解flexbox请看这里

flex属性

flex属性是flex-grow 、flex-shrink和flex-basis的简写。

一. flex-grow

首先要记住的一点是：flex-grow属性值设置为2的元素宽度不一定是flex-grow属性设置为1的元素宽度的2倍。

例如: 演示地址

css:

#wrap{
  display: flex;
  width: 500px;
  height: 500px;
  background: silver;
  margin:0 auto;
  align-items: flex-start;
}
.item{
  text-align: center;
  font-size: 20px;
  color:#fff;
  font-weight: 700;
}
.item1{
  background: red;
  flex-grow:2;
}
.item2{
  flex-grow: 1;
  background: orange;
  align-self: center;
}
.item3{
  background: blue;
  align-self: flex-start;
}
.item4{
  background: green;
  align-self: flex-end;
}

你会发现：item1的宽度(312.76px)并不是item2宽度(162.55px)的2倍。这是为什么呢？原来，item1得到的剩余空间时item2得到的剩余空间的2倍。
解释一下:还是拿上面这个例子来说:item3和item4的宽度都是12.34px,这是元素内容的宽度(此时元素的flex-grow值是默认的0)；
它是这么计算的:500-12.34*4=450.64,此时450.64就是剩余空间，由于item1占用2份，item2占用1份，item3和item4都是占用0份，因此将剩余空间分配成3份：450.64/3=150.21(约等于)。然后再扩展item1和item2 即:12.34+2*150.21=312.76(item1);12.34+150.21=162.55(item2)。

但是又有一种情况不太一样，就是当flex-basis属性的值不是auto时，此时元素的基准值是flex-basis设置的值；
演示地址
css:

body{
  margin:0;
}
*{
  box-sizing: border-box;
}
#wrap{
  display: flex;
  width: 500px;
  height: 500px;
  background: silver;
  margin:0 auto;
  align-items: flex-start;
}
.item{
  text-align: center;
  font-size: 20px;
  color:#fff;
  font-weight: 700;
}
.item1{
  background: red;
  flex-grow:2;
  flex-basis: 100px;
}
.item2{
  flex-grow: 1;
  background: orange;
  align-self: center;
  flex-basis: 50px;
}
.item3{
  background: blue;
  align-self: flex-start;
}
.item4{
  background: green;
  align-self: flex-end;
}

此时的计算公式是:500-12.34*2-150=325.32,此时剩余空间是325.32，再分配成3份，各自分配给item1和item2, (325.32/3)*2+100=316.88(item1),(325.32/3)+50=158.44(item2);

总结一下：

• 剩余空间 =（容器大小 - 所有相邻项目flex-basis 总和）

【注:】若flex-basis不设置或者设置成auto,则：剩余空间 =（容器大小 - 所有相邻项目flex-basis和项目内容宽度的总和）

• 每项伸缩大小 = 伸缩基准值 + ((剩余空间 / 所有相邻项目flex-grow总和) *此项的flex-grow值)

二、flex-shrink

flex-shrink也就是flex:1 1 10px中的第二个值，它应用于当项目超过容器计算值时就会将项目压缩。

示例

css:

body{
  margin:0;
}
*{
  box-sizing: border-box;
}
#wrap{
  display: flex;
  width: 500px;
  height: 500px;
  background: silver;
  margin:0 auto;
  align-items: flex-start;
}
.item{
  text-align: center;
  font-size: 20px;
  color:#fff;
  font-weight: 700;
}
.item1{
  background: red;
  flex:2 1 200px;
}
.item2{
  background: orange;
  align-self: center;
  flex:1 2 200px;
}
.item3{
  background: blue;
  align-self: flex-start;
  flex:1 2 200px;
}
.item4{
  background: green;
  align-self: flex-end;
  flex:1 1 200px;
}

宽度最大为500px的容器和可用负空间(-300px)，通过每项收缩比例值乘以伸展基准值并累加。

• 项目一(1x200) + 项目二(2x200) + 项目三(2x200) + 项目四(1 x 200) = 所有项目总和(1200)

然后我们将每一项除以所有项目之和。例如项目二：

• 项目二收缩因数 = 项目二(2 x 200px)/所有项目之和(1200) = 1/3

然后乘以负可用空间(-300px)

• 第二项移除空间 = 项目二收缩因数(1/3) x 负可用空间(-300px) = -100。

• 第二项的宽度= 200-100=100

【注:】若flex-basis属性值为auto,则总宽度500先减去该项的内容宽度，再按照上述公式计算。

参考资料

• 一个完整的Flexbox指南

• 理解Flexbox：你需要知道的一切

• 探索Flexbox