Flex布局下min/max-width异常及图片排版问题求助

我来帮你搞定这两个布局问题，直接看修改后的代码和说明：

修改后的完整代码 #

.content { 
  display: flex; 
  flex-direction: row; 
  border: 1px solid red; 
}
.th { 
  display: flex; 
  align-items: flex-start; 
  flex-direction: column; 
  margin: 0 30px 0 0; 
  min-width: 30%; 
  max-width: 60%; 
  flex-shrink: 0; /* 禁止容器收缩，保证min-width生效 */
  border: 1px solid blue; 
}
.cimage {
  text-align: center; /* 让主图居中显示 */
}
.cimage img{ 
  padding:10px; 
  max-height: 200px; 
  max-width: 200px; 
}
.thumbs { 
  display: flex; 
  justify-content: flex-start; 
  flex-wrap: wrap; /* 缩略图数量过多时自动换行 */
}
.thumb { margin: 5px 5px 0 0; }

<div class="content">
  <div class="th" >
    <div class="items" >
      <div class="item">
        <div class="cimage"><img src="https://via.placeholder.com/200"/></div>
      </div>
    </div>
    <div class="thumbs">
      <div class="thumb"><img src="https://via.placeholder.com/50"/></div>
      <div class="thumb"><img src="https://via.placeholder.com/50"/></div>
      <div class="thumb"><img src="https://via.placeholder.com/50"/></div>
      <div class="thumb"><img src="https://via.placeholder.com/50"/></div>
      <div class="thumb"><img src="https://via.placeholder.com/50"/></div>
      <div class="thumb"><img src="https://via.placeholder.com/50"/></div>
    </div>
  </div>
  <div class="text">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publish
  </div>
</div>

关键修改说明 #

1. 主图居中 #

给.cimage添加text-align: center，因为图片是行内块元素，这个属性可以直接让它在父容器里水平居中。如果你更喜欢flex布局，也可以把.cimage改成：

.cimage {
  display: flex;
  justify-content: center;
}

效果是完全一致的。

2. 修复缩略图容器的宽度与换行问题 #

• .th的宽度控制：原来的.th作为flex容器（.content）的子元素，默认flex-shrink: 1会让它在空间不足时被压缩，导致你的min-width设置失效。添加flex-shrink: 0后，它的宽度会严格遵守min-width和max-width的限制——空间足够时不超过max-width，空间较小时保持不小于min-width。
• 缩略图自动换行：给.thumbs添加flex-wrap: wrap，这样当缩略图总宽度超过.thumbs容器宽度时，会自动换行，同时保持左对齐的效果。

另外，你提到的单位适配问题，把30%、60%这类百分比单位换成rem或者其他响应式单位，就能更好适配小屏幕啦。

内容的提问来源于stack exchange，提问作者user3541631