响应式场景下Flex子项宽度设置无效求助

问题场景 #

你设置了包含5个flex子项的容器，想在屏幕≤800px时让子项宽度为45%，实现每行2个的布局，但子项完全不响应width/flex-basis设置。

原代码 #

HTML结构

<section class="dishesNewest">
    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>
</section>

CSS样式

.dishesNewest {
  margin: 10rem auto 25rem auto;
  display: flex;
  padding: 0 5%;
  justify-content: center;
}

.newDish {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  gap: 2rem 0;
  padding: 8px;
}

@media only screen and (max-width: 800px) {
  .newDish {
    width: 45%
  }
}

问题原因 #

1. flex容器未设置换行：flex容器默认flex-wrap: nowrap，所有子项会强制挤在一行，即使设置了宽度，容器也会压缩子项实际宽度来适配一行布局，导致width设置失效。
2. min-width优先级冲突：.newDish设置了min-width: 150px，当屏幕≤800px时，容器可用宽度（减去padding）的45%可能小于150px，此时min-width会优先生效，子项保持最小宽度，无法达到45%的设置。

解决方案 #

步骤1：给flex容器添加换行属性

修改.dishesNewest的CSS，添加换行规则，让子项空间不足时自动换行：

.dishesNewest {
  margin: 10rem auto 25rem auto;
  display: flex;
  padding: 0 5%;
  justify-content: center;
  flex-wrap: wrap; /* 新增换行属性 */
  gap: 1rem; /* 可选：添加子项间距，避免布局拥挤 */
}

步骤2：调整媒体查询中的子项样式

根据需求选择以下方式之一：

• 方式一：取消最小宽度限制，确保45%宽度生效

@media only screen and (max-width: 800px) {
  .newDish {
    width: 45%;
    min-width: unset; /* 取消最小宽度限制 */
  }
}

• 方式二：使用flex属性精准控制（推荐）

@media only screen and (max-width: 800px) {
  .newDish {
    flex: 0 0 45%; /* flex-grow:0 不放大; flex-shrink:0 不缩小; flex-basis:45% 基础宽度45% */
    min-width: unset; /* 可选：根据屏幕尺寸决定是否保留最小宽度 */
  }
}

效果说明 #

添加flex-wrap: wrap后，子项会在容器宽度不足时自动换行；调整min-width或使用flex属性后，子项会按照45%宽度布局，实现每行2个的效果，第5个子项单独占一行。

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