×
  • 的CSS Flexbox–完整的初学者指南

  • 弹性收缩

    课程清单

    在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) 上 密码笔.

    弹性收缩特性
    .
    .
  • 启用通知    不用了,谢谢