CSS3 弹性布局flex-shrink属性
flex-shrink 当空间不足的时候,弹性元素的"缩小"比例。默认值为1。(让弹性元素按一定比例缩放,并"恰好"能放进容器。)
定义了当容器空间不足时,item是否缩小。
表示当空间不足时,item自动缩小,其可能的值为整数,表示不同item的缩小比例。
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
css
.container {
display: flex;
display: -webkit-flex;
outline: 1px dashed red;
width: 100px;
margin: 200px auto;
}
.item {
width: 320px;
height: 320px;
background-color: #b6b6b6;
}
.item1 {
background-color: pink;
flex-shrink: 1;
}
.item2 {
background-color: lightblue;
flex-shrink: 2;
}
.item3 {
background-color: lightgreen;
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果