柔性箱中的统一自动物品高度 [英] Uniform auto items height in flexbox

问题描述

我有一个带有弹性框和多个弹性项目的页面，flex项目表示帖子，这些帖子有时会有大的标题，有时会有小的标题，导致每行的高度不均匀，如图所示： p>

我不想设定一个固定的高度，因为现在小标题将会有一个很大的空白。相反，我希望每行的高度是不变的，并等于包含后期元素的最小高度。

这是我的Css：

  / *张贴页面* / 
 
 .post-containter {
 padding：4％; 
 display：flex; 
 flex-direction：row; 
 flex-wrap：wrap; 
 justify-content：space-around; 
 align-content：space-around; 
} 
 .post {
 text-align：center; 
 width：250px; 
 padding：10px 10px; 
 border-radius：5px; 
 border：细实体＃f8f8f8; 
 box-shadow：1px 1px 2px rgba（0,0,0,0.1）; 
背景颜色：白色; 
 display：inline-block; 
 margin-top：15px; 
过渡：箱形阴影150ms缓出; 
} 
 .post h5 {
 font-weight：normal; 
保证金：5px; 
} 
 .post：hover {
 box-shadow：0px 0px 25px rgba（0,0,0,0.1）; 
} 
 .posts-head {
 text-align：center; 
 font-weight：bold; 
 font-size：50px; 
} 
 img.post-image {
最大宽度：100％; 
 height：auto; 
 border-top：3px solid＃558abb; 
 border-bottom：3px solid＃00c8bd; 
 
 $ / code $ / pre 
 $ b $ p 这里是HTML：
 
 
 < div class =post-containter> 
 {site.posts％中的帖子％} 
< a href ={{post.url}}> 
< div class =post> 
 < h5> {{post.title}}< / h5> 
< / div> 
< / a> 
 {％endfor％} 
< / div> 
  
网站参考： 
这里的主要问题是 post 的父元素，这是包装它的链接。
 
 
 
如果你给它 display：flex 它可以工作 
 
 
  .post-containter>一个{
 display：flex; 
} 
  
 
I have a page with a flex box and multiple flex items, flex items represent posts, those posts sometimes have large titles and sometimes small ones resulting in a non uniform height per row, as you may see in this image:



I don't want to set a fixed height because now small titles will have a big empty space. Rather, I want the height to be constant per row and is equal to the least height possible to contain the post elements.

Here is my Css:
/* Post Pages */

.post-containter {
    padding:4%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
}
.post {
    text-align: center;
    width: 250px;
    padding: 10px 10px;
    border-radius: 5px;
    border: thin solid #f8f8f8;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    background-color: white;
    display: inline-block;
    margin-top: 15px;
    transition: box-shadow 150ms ease-in-out;
}
.post h5 {
    font-weight: normal;
    margin:5px;
}
.post:hover {
    box-shadow: 0px 0px 25px rgba(0,0,0,0.1);
}
.posts-head {
    text-align: center;
    font-weight: bolder;
    font-size: 50px;
}
img.post-image {
    max-width: 100%;
    height: auto;
    border-top: 3px solid #558abb;
    border-bottom: 3px solid #00c8bd;
}
And here is the HTML:
<div class="post-containter">
{% for post in site.posts %}
    <a href="{{post.url}}">
        <div class="post">
            <img class="post-image" src="{{ post.image_path }}" alt="{{ post.title }}"/>
            <h5>{{ post.title }}</h5>
        </div>
    </a>
{% endfor %}
</div>
Site reference: https://squircleart.github.io/posts.html
解决方案
The main problem here is the parent element of the post, the link that wraps it.

If you give it display: flex it will work
.post-containter > a {
  display: flex;
}


                        
这篇关于柔性箱中的统一自动物品高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！