Combinando linhas e colunas no flexbox
Eu tenho três elementos em umarticle
: a foto, as categorias e as informações da postagem.
Estou tentando descobrir como empilhar o elemento de categorias na parte superior da coluna de informações da postagem (nº 2 na parte superior 3, se você estiver olhando a foto em anexo), para que pareça duas colunas de 50%, mesmo que exista são três elementos flexíveis.
.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>