一种方法是使您的figure@H_404_2@元素具有弹性容器，并将其对齐方式设置为flex-direction: column@H_404_2@。这样可以更好地控制整个元素的宽度。
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.flex-figure-item {
padding: 5px;
margin-top: 10px;
line-height: 10px;
font-weight: bold;
font-size: 1em;
display: flex; /* NEW */
flex-direction: column; /* NEW */
width: 150px; /* NEW */
}
figcaption {
color: black;
}
<div class="flex-container">
<figure class="flex-figure-item">
<img src="https://placehold.it/150x200" alt="placeholder">
<figcaption>Short, John</figcaption>
</figure>
<figure class="flex-figure-item">
<img src="https://placehold.it/150x200" alt="placeholder">
<figcaption>WrapMe, Longname should not go past right side of image</figcaption>
</figure>
<figure class="flex-figure-item">
<img src="https://placehold.it/150x200" alt="placeholder">
<figcaption>Short, Sally</figcaption>
</figure>
</div>
@H_404_2@
602392714
清零编程群