Question

我有以下响应式弹性布局，但.image-holder不会采用正确的宽度 - 它似乎根据text-holder

中的文本大小调整大小

.pdf-link-list {
  list-style: none;
  padding: 1em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.pdf-link-list .column {
  width: 50%;
  padding: 0 5px;
  box-sizing: border-box;
}
.pdf-link-list .link {
  display: flex;
  text-decoration: none;
  align-items: center;
  width: 100%;
}
.pdf-link-list .image-holder {
  padding-right: 15px;
  width: 35%;
}
.pdf-link-list .width100 {
  width: 100%;
}
.pdf-link-list .text-holder {
  flex-grow: 1;
}

<ul id="laying-patterns-links" class="pdf-link-list">
  <li class="column link-holder">
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label="">
      <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span>
      <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing</span>
    </a>
  </li>
  <li class="column link-holder">
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label="">
      <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span>
      <span class="text-holder">Proin varius magna vitae magna porttitor tincidunt</span>
    </a>
  </li>
  <li class="column link-holder">
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label="">
      <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span>
      <span class="text-holder">Sed vestibulum aliquet ligula, at suscipit libero</span>
    </a>
  </li>
  <li class="column link-holder">
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label="">
      <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span>
      <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing  Lorem ipsum dolor sit amet, consectetur adipiscing</span>
    </a>
  </li>
</ul>

有人知道我错过了什么，我想是因为我给了.image-holder一个width和.text-holder一个flex-grow:1，.image holder文本持有人扩展时应保持不变。

我是刚接触flex的人，所以想了解为什么它的行为方式

修改

很抱歉，上面图片库的固定宽度仅用于演示，因为实际值并未在代码段中显示问题。图像持有者宽度的实际值是：

width: 35%; min-width: 100px; max-width:250px; (instead of width:150px;)

如果所有图像保持器中的所有图像尺寸相同，为什么不是所有图像保持器都是35％？

Answer 1

对min-width课程width另外使用.image-holder。这样，这些元素实际上至少会150px宽。

Answer 2

将.image-holder flex:1提交给img设置max-width:100%

＆＃13;

.pdf-link-list {
  list-style: none;
  padding: 1em 0;
  display: flex;
  flex-wrap: wrap;
}
.pdf-link-list .column {
  width: 50%;
  padding: 0 5px;
  box-sizing: border-box;
}
.pdf-link-list .link {
  display: flex;
  text-decoration: none;
  align-items: center;
  width: 100%;
}
.pdf-link-list .image-holder {
  margin-right: 15px;
  width: 35%;
  min-width: 100px;
  max-width: 250px;
  flex: 1
}
.pdf-link-list .width100 {
  max-width: 100%
}
.pdf-link-list .text-holder {
  flex: 1
}

＆＃13;

<ul id="laying-patterns-links" class="pdf-link-list">
  <li class="column link-holder">
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label="">
      <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span>
      <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing</span>
    </a>
  </li>
  <li class="column link-holder">
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label="">
      <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span>
      <span class="text-holder">Proin varius magna vitae magna porttitor tincidunt</span>
    </a>
  </li>
  <li class="column link-holder">
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label="">
      <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span>
      <span class="text-holder">Sed vestibulum aliquet ligula, at suscipit libero</span>
    </a>
  </li>
  <li class="column link-holder">
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label="">
      <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span>
      <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing  Lorem ipsum dolor sit amet, consectetur adipiscing</span>
    </a>
  </li>
</ul>

＆＃13;

Answer 3

在.image-holder上将flex-shrink设为零。这可以防止图像在弹性框内调整大小。

flex-shrink: 0;

默认情况下，该值设置为1.允许image-holder调整大小并调整为flex。

Flex没有宽度

3 个答案: