---
id: 587d78ae367417b2b2512afd
title: Use the flex-basis Property to Set the Initial Size of an Item
challengeType: 0
videoUrl: ''
localeTitle: 使用flex-basis属性设置项的初始大小
---
## Description
flex-basis
属性指定CSS在使用flex-shrink
或flex-grow
进行调整之前的项的初始大小。 flex-basis
属性使用的单位与其他大小属性( px
, em
, %
等)相同。该值根据内容auto
项目大小。
## Instructions
使用flex-basis
设置框的初始大小。将CSS属性flex-basis
添加到#box-1
和#box-2
。给#box-1
一个值为10em
, #box-2
给一个值为20em
。
## Tests
```yml
tests:
- text: '#box-1
元素应该具有flex-basis
属性。'
testString: 'assert($("#box-1").css("flex-basis") != "auto", "The #box-1
element should have a flex-basis
property.");'
- text: '#box-1
元素的flex-basis
值应为10em
。'
testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), "The #box-1
element should have a flex-basis
value of 10em
.");'
- text: '#box-2
元素应该具有flex-basis
属性。'
testString: 'assert($("#box-2").css("flex-basis") != "auto", "The #box-2
element should have the flex-basis
property.");'
- text: '#box-2
元素的flex-basis
值应为20em
。'
testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), "The #box-2
element should have a flex-basis
value of 20em
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```