CSS flex固定宽度导致行内容窗口缩放不适配，如何修改兼顾布局与响应式

解决方案 #

核心修改逻辑 #

• 给flex容器.object-elements添加flex-wrap: wrap属性，允许空间不足时子元素自动换行排布
• 将所有子元素的flex属性从flex:0 0 固定宽度修改为flex:0 1 固定宽度，含义是不允许放大（保持宽屏时原有宽度不变，和原有外观一致）、允许缩小（窗口变窄时可以压缩宽度适配）、初始宽度为原来的固定值
• 给每个子元素添加合理的min-width阈值，避免内容压缩到不可读，达到最小宽度后就会触发换行
• 给容器添加align-items: center保证所有元素垂直居中对齐，添加row-gap控制换行后的行间距

修改后的CSS代码 #

.product-row {
  background-color: rgba(202, 226, 245, 0.658);
  border: 1px solid black;
  border-bottom-width: 3px;
  border-top-width: 0;
  border-left-width: 0;
}
.object-elements {
  display: flex;
  flex-direction: row;
  /* 新增：允许子元素自动换行 */
  flex-wrap: wrap;
  /* 新增：元素垂直居中对齐 */
  align-items: center;
  /* 可选新增：换行后行间距 */
  row-gap: 10px;
  padding: 4px 0;
}

.product-name {
  box-sizing: border-box;
  font-size: larger;
  padding: 10px;
  font-weight: 600;
  /* 修改：允许缩小，不允许放大，保持初始宽度210px */
  flex: 0 1 210px;
  /* 新增：最小宽度阈值，可根据需求调整 */
  min-width: 120px;
}

.price {
  font-size: larger;
  padding: 10px;
  font-weight: 600;
  padding-left: 16px;
  padding-right: 16px;
  flex: 0 1 100px;
  min-width: 60px;
}

.quantity-button {
  font-size: larger;
  padding: 10px;
  font-weight: 600;
  flex: 0 1 160px;
  min-width: 120px;
}

.quantity {
  display: inline-block;
  width: 20px;
  text-align: center;
}
.add-remove {
  width: 3rem;
  font-size: 1.5rem;
  text-align: center;
  text-shadow: 0 1px 0 rgba(#fff, 0.6);
  cursor: pointer;
  border-radius: 10px;
  margin: 5px;
  border-width: thin;
}

.total-price {
  font-size: larger;
  font-weight: 600;
  padding: 10px 0px 0px 50px;
  flex: 0 1 100px;
  min-width: 80px;
}

.product-img {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  /* 新增：图片固定尺寸不缩小 */
  flex-shrink: 0;
}

效果说明 #

宽屏状态下所有元素的宽度和原有样式完全一致，不会出现变形；窗口缩小时，文本类元素会按比例缩小适配宽度，当宽度达到设置的min-width阈值后，元素会自动换行排布，不会出现内容溢出、超出容器的问题，通过array.map动态生成的列表元素不需要修改JS逻辑即可正常适配。

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