Flexbox中的自動換行不起作用

Question

我正在使用flexbox，每個項目都由圖片和文字組成。 我需要使所有圖片具有相同的高度（寬度可能會有所不同）和要包裝的文字，以便它不會擴展項目。

但是我設法只用合理的寬度而不是高度來啟用自動換行。

注意：我需要說明圖片而非項目的合理性。

 .wrapper1, .wrapper2 { display: flex; justify-content: center; flex-wrap: wrap; } .flex-item { margin: 5px; background-color: #ddd; } .wrapper1 .flex-item { width: 150px; } .flex-item p:last-child { margin-bottom: 0; } .card-image { width: 100%; } .card-body { padding: 7px; word-wrap: break-word; } .wrapper2 .flex-item { width: auto; } .wrapper2 .card-image { height: 231px; width: auto; } 

 <div class="wrapper1"> <div class="flex-item"> <a href="/comics/novathekeep" title="Нова: Цитадель"><img src="http://warcry.ru/comics/pages/thumb/51.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/novathekeep">Нова: Цитадель</a></p> </div> </div> <div class="flex-item"> <a href="/comics/artanissacrifice" title="Артанис: Великая жертва"><img src="http://warcry.ru/comics/pages/thumb/303.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/artanissacrifice">Артанис: Великая жертва</a></p> </div> </div> <div class="flex-item"> <a href="/comics/kerriganhopeandvengeance" title="Керриган: Надежда и мщение"><img src="http://warcry.ru/comics/pages/thumb/41.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/kerriganhopeandvengeance">Керриган: Надежда и мщение</a></p> </div> </div> </div> <div class="wrapper2"> <div class="flex-item"> <a href="/comics/novathekeep" title="Нова: Цитадель"><img src="http://warcry.ru/comics/pages/thumb/51.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/novathekeep">Нова: Цитадель</a></p> </div> </div> <div class="flex-item"> <a href="/comics/artanissacrifice" title="Артанис: Великая жертва"><img src="http://warcry.ru/comics/pages/thumb/303.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/artanissacrifice">Артанис: Великая жертва</a></p> </div> </div> <div class="flex-item"> <a href="/comics/kerriganhopeandvengeance" title="Керриган: Надежда и мщение"><img src="http://warcry.ru/comics/pages/thumb/41.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/kerriganhopeandvengeance">Керриган: Надежда и мщение</a></p> </div> </div> </div> 

小提琴

第一個flexbox具有相同寬度的項目（自動換行），第二個flexbox具有相同高度的項目（自動換行不起作用）。

Answer 1

您必須分配max-width或flex-basis屬性

.wrapper2 .flex-item {
    flex: 0 1 150px;
}

要么

.wrapper2 .flex-item {
    max-width: 150px;
}

Answer 2

我認為這對您有用，請嘗試並讓我知道。

.wrapper2 .card-image {
    height: 231px;
}

檢查這個小提琴