35 lines
951 B
Markdown
35 lines
951 B
Markdown
---
|
||
title: Add Flex Superpowers to the Tweet Embed
|
||
localeTitle: 添加Flex Superpowers到Tweet Embed
|
||
---
|
||
## 添加Flex Superpowers到Tweet Embed
|
||
|
||
[在前一个挑战的基础上](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md) ，您需要将属性添加到正确的选择器中。这里的诀窍是识别正确的选择器然后你需要添加_display：flex;_属性。
|
||
|
||
标题将确保图片，名称，句柄和跟随按钮在水平方向上重新定位。
|
||
|
||
```CSS
|
||
header {
|
||
display: flex;
|
||
}
|
||
```
|
||
|
||
将名称和句柄对齐，看起来像一个句子。
|
||
|
||
```CSS
|
||
header .profile-name {
|
||
display:flex;
|
||
margin-left: 10px;
|
||
}
|
||
```
|
||
|
||
将属性添加到跟随按钮以及边距将使按钮居中到正确的大小。
|
||
|
||
```CSS
|
||
header .follow-btn {
|
||
display:flex;
|
||
margin: 0 0 0 auto;
|
||
}
|
||
```
|
||
|
||
在页脚元素上使用相同的想法。 |