Помогите понять как разместить эти элементы так, чтоб они занимали всю ширину блока и чтоб межу ними было одинаковое расстояние
<header>
<p>Элемент 1</p>
<div>
<p> Элемент 2</p>
<p> Элемент 3</p>
</div
</header
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПомогите понять как разместить эти элементы так, чтоб они занимали всю ширину блока и чтоб межу ними было одинаковое расстояние
<header>
<p>Элемент 1</p>
<div>
<p> Элемент 2</p>
<p> Элемент 3</p>
</div
</header
не совсем понятно, что должно быть на выходе, но как вариант:
header.first, header.first > div {
display: flex;
flex-direction: row;
}
header.first p {
width: calc(100vw / 3);
border: 1px solid red;
}
header.second, header.second > div {
display: flex;
flex-direction: column;
}
header.second p {
width: 100%;
margin-bottom: 10px;
line-height: 20px;
border: 1px solid green;
}
<header class="first">
<p>Элемент 1</p>
<div>
<p> Элемент 2</p>
<p> Элемент 3</p>
</div>
</header>
<header class="second">
<p>Элемент 1</p>
<div>
<p> Элемент 2</p>
<p> Элемент 3</p>
</div>
</header>
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
.box1 {
background-color: darksalmon;
text-align: center;
}
.box2 {
display: flex;
}
.box2 p {
flex: 1 1 100%;
text-align: center;
}
.box2 p:first-child {
background-color: powderblue;
}
.box2 p:last-child {
background-color: slategrey;
}
<header class="first">
<p class="box1">Элемент 1</p>
<div class="box2">
<p> Элемент 2</p>
<p> Элемент 3</p>
</div>
</header>