在Flexbox中合并行和列 [英] Combining rows and columns in flexbox
本文介绍了在Flexbox中合并行和列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在文章
中包含三个元素:照片,类别,然后是帖子信息。
I have three elements in an article
: the photo, the categories and then the post info.
我正在尝试弄清楚如何使categorys元素堆叠在帖子信息列的顶部(如果您正在查看附带的照片,则在#3顶部的#2顶部),因此即使有50%的列也看起来像是三个flex元素。
I am trying to figure out how to get the categories element to stack on top of the post info column (#2 on top of #3, if you are looking at the attached photo) so it looks like two 50% columns even though there are three flex elements.
.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旁边,并使用flex inside 将该包装器堆叠在#2和#3上。
I'd put a wrapper div around the two things you want to stack. Then you can use flex to put that wrapper next to #1, and use flex inside that wrapper to stack #2 and #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>
这篇关于在Flexbox中合并行和列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文