uni-app跨平台开发笔记，CSS flex-shrink属性

今天在写uni-app项目的时候学到一个不错的API，今天记录一下。

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

当我们把flex-shrink设置为0的时候就是不让元素挤压。

该柔性收缩属性指定多少项目会缩小相对的其余项目柔性容器。如果项目的大小大于容器的大小，则项目会收缩以适合伸缩容器。如果flex-shrink属性未包含在flex速记声明中，则默认情况下该值设置为1。如果没有弹性项目，则flex-shrink属性不会有任何作用。该柔性收缩属性是一个CSS3属性。

<!DOCTYPE html>
<html><head><title>Title of the document</title><style>.box {
        width: 320px;
        height: 120px;
        border: 1px dotted #666666;
        display: -webkit-flex;
        /* Safari */display: flex;
      }
      .box div {
        -webkit-flex-grow: 1;
        /* Safari 6.1+ */-webkit-flex-shrink: 3;
        /* Safari 6.1+ */-webkit-flex-basis: 100px;
        /* Safari 6.1+ */flex-grow: 1;
        flex-shrink: 3;
        flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
        -webkit-flex-shrink: 7;
        /* Safari 6.1+ */flex-shrink: 7;
      }
    </style></head><body><h2>Flex-shrink property example</h2><div class="box"><div style="background-color: #eeeeee;"></div><div style="background-color: #1c87c9;"></div><div style="background-color: #8ebf42;"></div><div style="background-color: #cccccc;"></div><div style="background-color: #666666;"></div></div></body>
</html>

运行结果如下：

uni-app跨平台开发笔记，CSS flex-shrink属性

好了，今天就学习到这里吧，如果你喜欢我就请点个赞，关注我一下吧，谢谢。