在另一个 div 中使第一个孩子全宽

Question

我们可以简单地width: 100%;给first-child，flex-grow: 1;给所有其他项目。

然而，我们如何才能达到相同的效果，但div是分开的？h1和<p>位于左列中，<img>位于右列中。我们希望h1是全宽的，并将<p>和<img>并排放置。

以小提琴为例。红色是我所拥有的结构，蓝色是我想要实现的。

Answer 1

添加以下 CSS：

#container {
position: relative;
}
h1 {
position: absolute;
}
p, img {
margin-top: 100px;
}

<小时 />

编辑

#container {
background-color: red;
width: 20%;
display: flex;
flex-direction: row-reverse;
position: relative;
}
.item h1:first-child {
width: 100%;
position: absolute;
}
.item {
flex: 1;
}
.item p,
.item img {
margin-top: 100px;
}
#wrapper {
background-color: blue;
width: 20%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.items:first-child {
width: 100%;
}
.items:not(:first-child) {
flex: 1;
}
/* Added */
h1 {
left: 0;
}
#change-p {
position: absolute;
left: 0;
width: 50%;
}
#img-item {
transform: translateX(100%);
}

<div id="container">
<div class="item">
<h1>Header</h1>
<p id="change-p">Lorem ipsum data flow.. </p>
</div>
<div id="img-item" class="item">
<img id="change-img" src="https://via.placeholder.com/150" alt="placeholder" />
</div>
</div>