freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md

---
id: 587d78ab367417b2b2512af0
title: '使用 display: flex 定位两个盒子'
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
forumTopicId: 301105
---

# --description--

这节会使用一种不同的挑战方式来学习一下如何使用 CSS 更灵活地布局元素。首先通过一个挑战来理解原理，然后通过操作一个简单的推文组件来应用“弹性盒子”（flexbox）。

只要在一个元素的 CSS 中添加`display: flex;`，就可以使用其它 flex 属性来构建响应式页面了。

# --instructions--

为`#box-container`添加`display`属性，设置其值为 `flex`。

# --hints--

`#box-container`应有`display`属性，其值应为 `flex`。

```js
assert($('#box-container').css('display') == 'flex');
```

# --solutions--