У меня следующий гибкий гибкий макет, но .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 должен остаться то же самое, пока текстовый держатель расширяется.

Я новичок в гибкости, поэтому хотел бы понять, почему он ведет себя так, как есть

ИЗМЕНИТЬ

Извините, фиксированная ширина для держателя изображения выше предназначена только для демонстрации, поскольку реальные значения не отражают проблему во фрагменте. Реальные значения ширины держателя изображения:

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

Почему не все держатели изображений имеют ширину 35%, если все изображения внутри них одинакового размера?

1
Pete 6 Сен 2016 в 15:56

3 ответа

Лучший ответ

Дайте своему .image-holder flex:1, а затем в img установите max-width:100%

.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
}
<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>
2
dippas 6 Сен 2016 в 13:11

Установите flex-shrink на ноль на {{X0 }}. Это предотвращает изменение размера изображения внутри гибкого блока.

flex-shrink: 0;

По умолчанию установлено значение 1. Разрешение image-holder изменять размер и подстраиваться под гибкость.

1
AA2992 6 Сен 2016 в 13:11

Используйте min-width дополнительно к width для вашего класса .image-holder. Таким образом, эти элементы действительно будут шириной не менее 150px.

2
Christoph 6 Сен 2016 в 13:01