html - 在 flexbox 中组合行和列

Question

我在 article 中包含三个元素:照片、类别和帖子信息。

我正在尝试弄清楚如何让类别元素堆叠在帖子信息列的顶部(#2 在#3 之上，如果您正在查看所附的照片)所以它看起来像两个 50% 的列即使有三个 flex 元素。

.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>

Answer 1

我会在您要堆叠的两个东西周围放置一个包装器 div。然后，您可以使用 flex 将该包装器放在 #1 旁边，并使用 flex inside 该包装器来堆叠 #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>