**](https://developer.mozilla.org/ru/docs/Web/HTML/Element/div)
универсальны контейнер для контента. Он не влияет на контент до тех пор, пока не будет стилизован с **css.** то есть этот тег помогает структурировать нам другие теги и прикольно компоновать их между собой. попробуйте этот код :point\_down:
{% tabs %}
{% tab title="index.html" %}
```markup
```
{% endtab %}
{% tab title="style.css" %}
```css
.warning {
border: 10px ridge #f00;
background-color: #ff0;
padding: .5rem;
display: flex;
flex-direction: column;
}
.warning img {
width: 100%;
}
.warning p {
font: small-caps bold 1.2rem sans-serif;
text-align: center;
}
```
{% endtab %}
{% endtabs %}
## больше css - больше креатива
### display: flex
свойство **`display`** определяет *тип отображения* элемента. по умолчанию у каждого **\
Beware of the leopard
** `display: block`, то есть каждый элемент находится на своей строке, вот так :point\_down::sparkles:
но что если мы хотим сделать их в ряд? для этого нам нужно будет обернуть эти несколько тегов/элементов в тег **\
** и добавить стиль `display: flex`. теперь в прямом смысле свойство `flex`позволит нам управлять этим **\
**, как мы захочем :smirk\_cat: .
.gif?alt=media\&token=26430c18-57c8-45d6-8c04-1149b9327d7e)
как вы видите наши элементы стали в ряд. это по умолчанию заложено при добавления стиля `display: flex`, то есть когда вы добавляете этот стиль, то по умолчанию скрыто добавляется и этот`flex-direction: row`, но есть ещё парочка свойств, который вы можете использовать
```css
flex-direction: row; // в линию
flex-direction: row-reverse; // в линию наоборот
flex-direction: column; // в колонку
flex-direction: column-reverse; // в колонку наоборот
```
также есть такое свойство `justify-content` - отвечает за выравнивание элементов по оси/линии
```css
justify-content: flex-start; // слева
justify-content: flex-end; // справа
justify-content: center; // по центру
justify-content: space-between; // первый элемент в плотную слева,
последний вплотную справа, между
остальными равномерные отсутпы
justify-content: space-around; // равномерные отступы между
всеми элементами
```
**больше свойств:**
](http://htmlbook.ru/html/div)
* [padding](http://htmlbook.ru/css/padding) и [margin](http://htmlbook.ru/css/margin)
* [размещение элементов на странице](https://tproger.ru/translations/how-css-flexbox-works/)
* [font-family](https://developer.mozilla.org/ru/docs/Web/CSS/font-family)
* [веб-шрифты](https://fonts.google.com/) и [как их юзать](https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/shrifty-podklyuchenie-web-shriftov)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://vik-coder.gitbook.io/html-css-course-with-sh/urok-4/untitled.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.