---
id: 587d78ae367417b2b2512afe
title: Use the flex Shorthand Property
challengeType: 0
videoUrl: ''
localeTitle: 使用flex速记属性
---
## Description
有一个快捷方式可以同时设置多个flex属性。通过使用flex
属性,可以将flex-grow
, flex-shrink
和flex-basis
属性设置在一起。例如, flex: 1 0 10px;
将项目设置为flex-grow: 1;
, flex-shrink: 0;
,和flex-basis: 10px;
。默认属性设置为flex: 0 1 auto;
。
## Instructions
将CSS属性flex
添加到#box-1
和#box-2
。给#box-1
赋值,使flex-grow
为2, flex-shrink
为2, flex-basis
为150px。给#box-2
赋值,使flex-grow
为1, flex-shrink
为1,其flex-basis
为150px。这些值将导致#box-1
增长以在容器大于300px时以#box-2
两倍速率填充额外空间,并在容器小于300px时以#box-2
的速率缩小两倍。 300px是两个框的flex-basis
值的组合大小。
## Tests
```yml
tests:
- text: '#box-1
元素的flex
属性应设置为2 2 150px。'
testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The #box-1
element should have the flex
property set to a value of 2 2 150px.");'
- text: '#box-2
元素的flex
属性应设置为1 1 150px。'
testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The #box-2
element should have the flex
property set to a value of 1 1 150px.");'
- text: '您的代码应该使用#box-1
和#box-2
的flex
属性。'
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the flex
property for #box-1
and #box-2
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```