35 lines
1.5 KiB
Markdown
35 lines
1.5 KiB
Markdown
|
---
|
|||
|
|
title: Add Flex Superpowers to the Tweet Embed
|
|||
|
|
localeTitle: Добавить Flex Superpowers в Tweet Вставить
|
|||
|
|
---
|
|||
|
|
## Добавить Flex Superpowers в Tweet Вставить
|
|||
|
|
|
|||
|
|
Основываясь на [предыдущем вызове](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md) , вам нужно будет добавить свойство в нужные селекторы. Здесь трюк определяет правильный селектор, а затем все, что вам нужно добавить на _дисплей: 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;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Эта же идея используется для элементов нижнего колонтитула.
|