弹性收缩

在flex-grow的另一侧，我们还有一个Flex Shrink属性。您可能已经猜到flex-shrink定义了flex项在必要时收缩的能力，并且与flex-grow不同，flex-shrink的默认值为1。

弹性收缩

首先要注意的是，默认情况下，每一个flex项目的flex-shrink值都设置为1，这就是我们尝试缩小flex容器以减少并缩小其中的项目的原因。
let’s say you don’t want to allow the shrink the items inside the flex container. for that simply set the flex-shrink value to 0.

...
.flex-item {
  ...
  flex-shrink : 0  /* Default is 1 */
}
...

此后，如果缩小浏览器，则弹性项目将立即溢出。否则，项目将缩小其可用空间。

Flex收缩个人

我们可以单独缩小项目，它会按照分配的值缩小特定项目。
例如，如果将flex-shrink值指定为4，则该特定项目将相对于其他项目收缩4倍。

...
.item-2 {
  ...
  flex-shrink : 4  /* Default is 1 */
}
...

在上面的2^nd 例如，您可以看到第3项比其他项缩水了。

演示版

看笔 弹性收缩
由rehmaanali（@geekstrick） 上 密码笔.

.
.