`flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 ~~~css .item { flex-shrink: <number>; /* default 1 */ } ~~~ 如果所有项目的`flex-shrink`属性都为1，当空间不足时，都将等比例缩小。如果一个项目的`flex-shrink`属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。 ~~~html <div class="box"> <div class="box-item shrink">1<div>(flex-shrink: 0)</div></div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> <div class="box-item">5</div> </div> ~~~ ~~~css .box { display: flex; background-color: white; } .box-item { width: 200px; height: 200px; line-height: 200px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } .box-item div { font-size: 14px; position: relative; top: -150px; } .box-item { flex-shrink: 1; } .shrink { flex-shrink: 0; } ~~~