flexbox中的统一自动物品高度

我有一个包含flex box和多个flex项目的页面，flex项目表示帖子，这些帖子有时会有大标题，有时会有小标题，导致每行的高度不均匀，正如您可能会看到的在此图像中：flexbox中的统一自动物品高度

我不想设定一个固定的高度，因为现在小游戏将有一个大的空的空间。相反，我希望高度在每行中保持不变，并且等于包含帖子元素的最小高度。

这里是我的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; 
}

这里是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>

网站参考：https://squircleart.github.io/posts.html

来源

2017-06-15 Omar Ahmad

您可以尝试证明内容：舒展;并为这些职位进行边际工作。 – Gerard

我们需要看到HTML和CSS里面的元素，对于我来说'post'肯定有相同的大小，但其内容不会 – LGSon

@Gerard'justify-content'没有值'拉伸' – LGSon

这里的主要问题是post的父元素中，链接包装它。

如果你给它display: flex它会工作

.post-containter > a { 
    display: flex; 
}

来源

2017-06-15 10:06:35 LGSon

如果我在“a”标签中使用post类而不是div，会更好吗？ –

@OmarAhmad不能说，试试看，如果你遇到麻烦，你知道在哪里问:)。至少现在你知道是什么造成了它。 – LGSon

谢谢，它似乎工作正常。我只需添加文字修饰：无;以确保我的标题没有下划线。 –

flexbox中的统一自动物品高度

回答

相关问题