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>
运行结果如下:
好了,今天就学习到这里吧,如果你喜欢我就请点个赞,关注我一下吧,谢谢。
