防止文本比flex容器中的图像宽

时间:2019-07-15 22:38:10

标签: html css flexbox

我正在看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>

0 个答案:

没有答案