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;
}

代码演示：