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>

Fiddle

먼저 인 flexbox은 동일한 폭을 갖는 아이템 (바꿈 작동) 번째 인 flexbox 동일 높이 항목이 있습니다 (바꿈 작동하지 않음) .

Answer 1

당신은

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

또는

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

Answer 2

이 내가 생각하는 당신을 위해 작동합니다, 시도를주고 알려 최대 폭 또는 플렉스 기반의 속성을 지정해야합니다.

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

확인이 fiddle