flexbox中的单词换行不起作用

我使用flexbox，每个项目都包含图片和文本。我需要使所有图片的高度相同（宽度可能会有所不同）和文字以包裹，因此它不会扩展项目。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>

Fiddle

首先Flexbox的具有相同的宽度项目（自动换行的作品），第二Flexbox的具有相同高度的项目（自动换行不工作）。

来源

2017-09-19 Sergey Atroshchenko

是浏览器的具体问题？ –

至少我需要它在Chrome中工作。 –

好吧，你总是在一列中有3行或它会有所不同？ –

您必须分配最大宽度或柔性基础属性

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

或

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

来源

2017-09-19 09:34:42

Word包装作品，但项目变得凌乱。所以这不是一个可接受的解决方案。 –

这会为你我想工作，给一个尝试，让我知道。

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

检查这个fiddle

来源

2017-09-19 10:21:55

与之前的答案一样，它使单词换行工作，但打破了卡的布局。 –

你有没有试过这个答案呢？ –

对不起，我忘了现在更新我已更新我的小提琴，你可以检查它我想这就是你想要的。 –

flexbox中的单词换行不起作用

回答

相关问题