我有三个元素article：照片、类别，然后是帖子信息。
我试图弄清楚如何让类别元素堆叠在帖子信息列的顶部（#2 在 #3 的顶部，如果您正在查看所附照片），因此它看起来像两个 50% 的列，即使有是三个弹性元素。
.flexbox {
display: flex;
}
.featured-image {
flex: 1;
}
.post-categories {}
.post-info {
flex: 1;
}<article class="flexbox">
<div class="featured-image" style="background-image: url(img.jpg);"></div>
<ul class="post-categories">
<li><a href="/category">Category</a>
</li>
</ul>
<div class="post-info">
<header>
<h3 class="post-title"><a href="/post">Post Title</a></h3>
<p class="timestamp">Posted 1 month ago</p>
</header>
</div>
</article>我会在你想要堆叠的两个东西周围放置一个包装 div。然后你可以使用flex将该包装器放在#1旁边，然后使用flexinside该包装器用于堆叠 #2 和 #3。
.flexbox {
display: flex;
}
/* stack 1 next to .post-meta, containing 2 and 3 */
.featured-image,
.post-meta {
flex: 1;
}
/* stack 2 and 3 inside .post-meta */
.post-meta {
display: inline-flex;
flex-direction: column;
}
/* these styles are mostly for demo purposes;
* adjust or remove as needed */
.post-categories,
.post-info {
padding: 10px;
list-style: none;
margin: 0;
}
.featured-image {
background-color: skyblue;
}
.post-categories { background: #ccc; }
.post-info { background: #ddd; }<article class="flexbox">
<div class="featured-image" style="background-image: url(img.jpg);"></div>
<div class="post-meta">
<ul class="post-categories">
<li><a href="/category">Category</a></li>
</ul>
<div class="post-info">
<header>
<h3 class="post-title"><a href="/post">Post Title</a></h3>
<p class="timestamp">Posted 1 month ago</p>
</header>
</div>
</div>
</article>