Flex项目无法正确换行及收缩，需实现小屏幕布局与等高效果

针对你提出的两个需求——小屏幕下右侧内容块换行到图片下方，以及窗口收缩时两个flex子项保持相同高度，我调整了你的CSS代码，以下是完整的解决方案：

修改后的CSS代码 #

.new-collection-wrapper { 
  background-color: #f1f1f1; 
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
}
.new-collection-card { 
  width: 80%; 
  margin: 5em 0; 
  display: flex;
  /* 小屏幕默认垂直排列，内容自然落在图片下方 */
  flex-direction: column;
  /* 确保子项自动拉伸填充容器高度 */
  align-items: stretch;
}
.new-collection-card-img img { 
  height: 400px; 
  width: auto;
  /* 避免小屏幕下图片溢出容器 */
  max-width: 100%;
}
.new-collection-content { 
  color: #f1f1f1; 
  background-color: #111111; 
  padding: 0 3em;
  /* 内容垂直居中，同时保证最小高度和图片一致 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
}
.new-collection-content h3 { 
  font-size: 2.5em; 
  font-weight: 300; 
  text-transform: uppercase; 
  line-height: 1.3; 
  margin-bottom: .2em; 
}
.new-collection-content p { 
  font-family: 'Roboto', sans-serif; 
  font-weight: 300; 
  font-size: .8em; 
  letter-spacing: 1px; 
}
/* 中等屏幕及以上切换为水平布局 */
@media screen and (min-width: 810px) { 
  .new-collection-card {
    flex-direction: row;
  }
  .new-collection-card-img,
  .new-collection-content {
    /* 让两个子项平分可用宽度，可根据需求调整比例 */
    flex: 1;
  }
}

关键修改说明 #

• 小屏幕换行实现：给.new-collection-card默认设置flex-direction: column，内容块会自然排列在图片下方；在中等屏幕的媒体查询中切换为flex-direction: row，恢复水平布局。
• 保持等高的核心：
  1. 用align-items: stretch（覆盖原有的center）让子项自动拉伸，填充容器的高度空间。
  2. 给内容块设置min-height: 400px，确保它和图片的高度基准一致；大屏模式下添加flex: 1，让两个子项平分宽度的同时，始终保持相同高度。
  3. 给图片添加max-width: 100%，避免小屏幕下图片超出容器范围。

HTML部分无需修改，保留你原有的结构即可正常运行。

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