在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.
style.css
...
.flex-item {
...
flex-shrink : 0 /* Default is 1 */
}
...
此后,如果缩小浏览器,则弹性项目将立即溢出。否则,项目将缩小其可用空间。
Flex收缩个人
我们可以单独缩小项目,它会按照分配的值缩小特定项目。
例如,如果将flex-shrink值指定为4,则该特定项目将相对于其他项目收缩4倍。
style.css
...
.item-2 {
...
flex-shrink : 4 /* Default is 1 */
}
...
在上面的2nd 例如,您可以看到第3项比其他项缩水了。
演示版
看笔 弹性收缩
由rehmaanali(@geekstrick) 上 密码笔.