CSS实现Flex Grid随页面缩放不换行及布局异常求助

首先咱们拆解下你遇到的核心问题：目前你把每4个产品塞进独立的.row容器，每个.row都是单独的flex容器。当屏幕宽度不足以同时放下4个产品列时，每个row内部的列会各自换行，就出现了一行3个、一行1个的错乱——毕竟每个row只关心自己内部的布局，不会和其他row的换行逻辑对齐。再加上中等屏幕尺寸（介于移动端和1050px之间）没有明确的列宽限制，flex容器会随意拉伸/压缩列宽，进一步加剧了布局混乱。

下面是纯CSS的解决方案，尽量少改动你现有结构，同时彻底解决布局问题：

方案1：推荐重构为全局产品网格（更灵活） #

把所有产品列放到一个统一的.product-grid容器里，代替原来的多个.row，让flex全局控制所有产品的换行逻辑，保证每行列数一致。

修改后的HTML（产品部分） #

<div class="products">
  <div class="product-grid">
    <!-- 所有产品列都放在这个容器里 -->
    <div class="column">
      <img src="img.jpeg" />
      <h1> product</h1>
      <p>$100</p>
    </div>
    <div class="column">
      <img src="img.jpeg" />
      <h1> product</h1>
      <p>$100</p>
    </div>
    <!-- 剩余所有产品列依次排列 -->
  </div>
</div>

对应更新的CSS #

body { font-family: 'Montserrat'; font-size: 18px; }
.body { margin-left: 5%; margin-right: 5%; }
.logo { 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 400px; /* 补全原代码缺失的分号 */
  height:90px; /* 补全原代码缺失的分号 */
  max-width: 30%; 
}
.hero { display: block; margin-left: auto; margin-right: auto; max-width: 100%; }
.leftsidebar { display: none; }

/* 全局产品网格容器：基础样式 */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2%; /* 用flex原生gap代替margin，避免间距折叠问题 */
  justify-content: center;
}

/* 产品列：移动端默认1列 */
.column {
  flex: 0 0 100%; /* 固定占满宽度，不拉伸不压缩 */
  margin-bottom: 20px; /* 增加产品间垂直间距 */
}

/* 平板小屏幕：2列布局 */
@media screen and (min-width: 600px) {
  .column {
    flex: 0 0 49%; /* 减去gap的2%，两列刚好填满容器 */
  }
}

/* 中等屏幕：3列布局 */
@media screen and (min-width: 850px) {
  .column {
    flex: 0 0 32%; /* 3列+2%gap，刚好占满容器宽度 */
  }
}

/* 宽屏（1050px以上）：4列+侧边栏 */
@media screen and (min-width: 1050px) {
  .container {
    display: grid;
    grid-template-columns: 200px 1fr; /* 侧边栏固定宽度，产品区占剩余空间 */
    gap: 2%;
  }
  .leftsidebar {
    display: inherit;
  }
  .product-grid {
    justify-content: flex-start; /* 宽屏下和侧边栏左对齐，视觉更统一 */
  }
  .column {
    flex: 0 0 23.5%; /* 4列+3*2%gap=99.5%，留出微小余量避免溢出 */
  }
}

方案2：保留原row结构（最小改动） #

如果不想调整HTML结构，可以给每个.row里的列设置最小宽度，强制换行时保持每行列数一致：

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  justify-content: center;
  margin-bottom: 20px;
}
.column {
  flex: 1 1 23%; /* 最小宽度23%，屏幕不够时自动换行 */
  min-width: 200px; /* 设置最小宽度，避免列被压缩得太窄 */
}

/* 宽屏样式保留原逻辑 */
@media screen and (min-width: 1050px) {
 .row { flex-wrap: nowrap; }
 .column { flex: 1 1 auto; }
 .container { display: grid; }
 .leftsidebar { grid-column: 1; display: inherit; }
 .products { grid-column: 2; }
}

关键改进点说明 #

• 用gap替代margin：flex/grid的原生gap属性能避免margin折叠、外侧多余间距等问题，布局更干净。
• 明确flex属性：flex: 0 0 [宽度] 强制列不拉伸、不压缩，固定宽度，保证每行列数统一。
• 多断点适配：覆盖移动端→平板→中等屏→宽屏的全场景，每个断点对应清晰的列数。
• 修复语法错误：原代码中.logo的width、height属性缺失分号，会导致样式失效，已补全。

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