我正在看this question。我无法解决文本比图像宽的问题。我有额外的标记,可以使容器行响应而无需媒体查询。如何防止文本比图像宽?
.issues-columns {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.issue-col {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 0 0 200px;
padding:5px;
}
.issue-col-text {
flex: 1 1 auto;
align-items: center;
}
<div class="issues-columns">
<div class="issue-col">
<img src="http://placekitten.com/200/200" />
<div class="issue-col-text">Text text text Text text text Text text text</div>
</div>
<div class="issue-col">
<img src="http://placekitten.com/200/200" />
<div class="issue-col-text">Text text text</div>
</div>
<div class="issue-col">
<img src="http://placekitten.com/200/200" />
<div class="issue-col-text">Text text text</div>
</div>
</div>