---
id: 587d78ad367417b2b2512afb
title: Use the flex-shrink Property to Shrink Items
challengeType: 0
videoUrl: ''
localeTitle: 使用flex-shrink属性收缩项目
---
## Description
到目前为止,挑战中的所有属性都适用于Flex容器(flex项的父级)。但是,flex项有几个有用的属性。第一个是flex-shrink
属性。当它被使用时,如果柔性容器太小,它允许物品收缩。当父容器的宽度小于其中所有flex项的组合宽度时,项会收缩。 flex-shrink
属性将数字作为值。数字越大,与容器中的其他项目相比,它将收缩得越多。例如,如果一个项目的flex-shrink
值为1而另一个项目的flex-shrink
值为3,则值为3的项目将缩小为另一个项目的三倍。
## Instructions
将CSS属性flex-shrink
添加到#box-1
和#box-2
。将#box-1
的值设为1,将#box-2
的值设为2。
## Tests
```yml
tests:
- text: '#box-1
元素应将flex-shrink
属性设置为值1。'
testString: 'assert($("#box-1").css("flex-shrink") == "1", "The #box-1
element should have the flex-shrink
property set to a value of 1.");'
- text: '#box-2
元素的flex-shrink
属性应设置为值2。'
testString: 'assert($("#box-2").css("flex-shrink") == "2", "The #box-2
element should have the flex-shrink
property set to a value of 2.");'
```
## Challenge Seed
## Solution
```js
// solution required
```