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中的統一自動物品高度

回答

相關問題