如何结合Grid与flex:9999技巧实现Flex项的合理堆叠

我明白你不想依赖flex-grow:9999和固定max-width的痛点——这种技巧确实不够优雅，还限制了布局的动态性。咱们可以通过调整内部布局逻辑，让容器完全遵循流式布局，自动在必要时换行，完全不用媒体查询。

方案一：用Grid重构内部布局（推荐） #

Grid天生擅长这种自适应流式布局，我们可以把.news的内部布局从Flex改成Grid，利用auto-fit和minmax实现动态换行：

修改后的CSS代码：

*, *::after, *::before { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  border: none; 
}

section.content-wrapper { 
  margin: 0 auto; 
  max-width: 975px; 
  display: grid; 
  grid-template-columns: repeat(10, 1fr); 
  gap: 44px 30px; /* 合并row-gap和column-gap，写法更简洁 */
}

section.content-wrapper .news.with-preview figure img { 
  width: 100%; 
}

/* 核心修改：把内部布局换成Grid */
section.content-wrapper .news.with-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 20px; /* 给figure和description之间加间距，提升可读性 */
}

section.content-wrapper .news { 
  border-top: 3px solid #dbdbdb; 
  grid-column: span 5; 
  padding-top: 19px; 
}

原理说明：

• grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr))：
  • auto-fit会自动根据容器宽度调整列数
  • min(200px, 100%)确保figure至少有200px宽度（容器足够宽时），同时在容器极窄时占满100%宽度
  • 1fr让剩余空间自动分配给.description，实现动态宽度
• 完全去掉了原来的Flex属性和固定max-width，布局完全跟随容器宽度自动调整：空间足够时figure和.description并排，空间不足时.description自动换行到figure下方。

方案二：优化Flex布局（保留Flex） #

如果你更倾向于保留Flex布局，也可以通过调整Flex属性实现同样效果，不用flex-grow:9999和固定宽度：

修改后的CSS代码：

*, *::after, *::before { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  border: none; 
}

section.content-wrapper { 
  margin: 0 auto; 
  max-width: 975px; 
  display: grid; 
  grid-template-columns: repeat(10, 1fr); 
  gap: 44px 30px; 
}

section.content-wrapper .news.with-preview figure { 
  flex: 0 0 auto; /* 禁止figure收缩，保持图片的原始比例宽度 */
  min-width: 200px; /* 给figure设置最小宽度，避免太窄影响视觉 */
}

section.content-wrapper .news.with-preview figure img { 
  width: 100%; 
}

section.content-wrapper .news.with-preview { 
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 加间距提升可读性 */
  align-items: flex-start; /* 让figure和description顶部对齐 */
}

section.content-wrapper .news.with-preview .description { 
  flex: 1 1 min-content; /* 允许扩展占满剩余空间，收缩到内容最小宽度 */
}

section.content-wrapper .news { 
  border-top: 3px solid #dbdbdb; 
  grid-column: span 5; 
  padding-top: 19px; 
}

原理说明：

• figure设置flex:0 0 auto和min-width:200px，确保它不会被压缩，且有最小宽度下限
• .description设置flex:1 1 min-content：
  • flex-grow:1让它在空间足够时占满剩余宽度
  • flex-shrink:1允许它收缩，但最小宽度是内容的最小宽度（min-content）
  • 当容器宽度小于figure宽度 + description最小内容宽度时，flex-wrap:wrap会自动把.description换到下一行

两种方案都完全符合你的需求：容器遵循Grid流，子项自适应满宽，必要时自动换行，没有固定宽度限制，也不用媒体查询。

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