---
id: 587d78ab367417b2b2512af3
title: 使用 flex-direction 在嵌入推文中创建多行
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
forumTopicId: 301104
dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed
---
# --description--
嵌入推文示例中的 `header` 和 `footer` 有自己的子元素,使用 `flex-direction` 属性可以把这些子元素排成行。 这个属性告诉 CSS 需要将这些子元素水平排列。
# --instructions--
为 `header` 和 `footer` 添加 CSS 属性 `flex-direction`,并把值设为 `row`。
# --hints--
`.follow-btn` 应在页面上呈现。 请关闭广告拦截器等任何扩展。
```js
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
```
`header` 应有 `flex-direction` 属性,其值应为 `row`。
```js
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
```
`footer` 应有 `flex-direction` 属性,其值应为 `row`。
```js
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
```
# --seed--
## --seed-contents--
```html
Quincy Larson
@ossia
I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.
1:32 PM - 12 Jan 2018I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.
1:32 PM - 12 Jan 2018