弹性盒收缩和增长计算

原址点这里

弹性盒收缩和增长计算

flex-shrink 弹性收缩

flex-shrink 用来定义弹性布局中项目的收缩规则，它的计算比较复杂。

先有 HTML 结构如下：

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

编写以下代码使其成为弹性布局：

section {
  display: flex;
  width: 400px;
}
div {
  height: 200px;
}

div:nth-of-type(1) {
  flex-basis: 200px;
  flex-shrink: 1;
  background-color: aqua;
}
div:nth-of-type(2) {
  flex-basis: 300px;
  flex-shrink: 2;
  background-color: silver;
}
div:nth-of-type(1) {
  flex-basis: 100px;
  flex-shrink: 3;
  background-color: tomato;
}

• 接下来把弹性容器的宽度记作 A；
• 把项目宽度总和记作 B，即 flex-basis 的和；
• 总收缩宽度记作 C，即 B - A 的差；
• 项目宽度权重总和为记作 D，有：

$$\begin{array}{rl}C& =B-A\\ & =(200px+300px+100px)-400px\\ & =200px\\ D& =200\ast 1+300\ast 2+100\ast 3=1100\end{array}$$

每个项目的收缩大小公式为 flex-basic 的值乘 flex-shrink 的值除以宽度权重总和再乘以总收缩宽度，即：：

$$flexBasic\ast flexShrink/D\ast C$$

那么题设中所给三个 div 元素最终宽度应该为：

$$\begin{array}{rl}div1& =200px-200\ast 1/1100\ast 200px\approx 163.64px\\ div2& =300px-300\ast 2/1100\ast 200px\approx 190.90px\\ div3& =100px-100\ast 3/1100\ast 200px\approx 45.45px\end{array}$$

flex-grow 弹性增长

相比弹性收缩，弹性增长就简单很多。

依旧使用这个 HTML 结构：

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

编写以下代码使其成为弹性布局：

section {
  display: flex;
  /* 这里修改为 900 */
  width: 900px;
}
div {
  height: 200px;
}

div:nth-of-type(1) {
  flex-basis: 200px;
  /* 把 flex-shrink 改为 flex-grow */
  flex-grow: 1;
  background-color: aqua;
}
div:nth-of-type(2) {
  flex-basis: 300px;
  flex-grow: 2;
  background-color: silver;
}
div:nth-of-type(1) {
  flex-basis: 100px;
  flex-grow: 3;
  background-color: tomato;
}

• 接下来把弹性容器的宽度记作 A，依题意是 900px；
• 把项目宽度总和记作 B，即 flex-basis 的和；
• 总增长宽度记作 C，即 A - B 的差；
• 项目 增长权重总和 为记作 D，有：

$$\begin{array}{rl}C& =A-B\\ & =900px-(200px+300px+100px)\\ & =300px\\ D& =1+2+3=6\end{array}$$

每个项目的宽度增长公式为 flex-grow 的值除以增长权重总和再乘以总增长宽度，即：：

$$flexGrow/D\ast C$$

那么题设中所给三个 div 元素最终宽度应该为：

$$\begin{array}{rl}div1& =200px+1/6\ast 300px\approx 250px\\ div2& =300px+2/6\ast 300px\approx 400px\\ div3& =100px+3/6\ast 300px\approx 350px\end{array}$$