响应式设计中Flex容器无法收缩换行的问题求助

嗨，我来帮你搞定这个Flex布局的响应式问题～

你遇到的核心问题是：Flex容器默认不会自动换行，当页面宽度缩小到放不下所有子元素时，它会默认让子元素挤压或者溢出（出现横向滚动），而不是换行。结合你的代码结构，我给你几个关键的调整步骤：

1. 给Flex容器开启换行功能 #

首先，给.fronttest添加flex-wrap: wrap属性，这是让子元素在空间不足时自动换行的核心开关：

.fronttest {
  display: flex;
  flex-wrap: wrap; /* 关键：开启换行 */
  margin: 0 auto;
  width: 80%;
  height: 50%;
  /* 可以根据需求加上align-items: center; 让子元素垂直居中 */
}

2. 调整子元素的Flex属性，控制换行时机 #

你现在给.front和.front-img都设置了flex: 1，这个属性是flex-grow:1, flex-shrink:1, flex-basis:0%的简写，它会让两个子元素平分容器宽度，但没法控制什么时候换行。可以改成带基础宽度的Flex属性，比如：

.front, .front-img {
  flex: 1 1 300px; 
  /* 含义：flex-grow:1（空间足够时扩展）、flex-shrink:1（空间不足时收缩）、flex-basis:300px（子元素的基础宽度） */
  /* 当容器总宽度小于300px*2=600px时，子元素就会自动换行 */
}

3. 确保图片能自适应容器宽度 #

图片本身可能带有固定尺寸，导致即使容器收缩，图片也不会跟着缩小，进而触发横向滚动。给图片添加以下样式，让它自适应父容器：

.front-img img {
  max-width: 100%;
  height: auto; /* 保持图片的宽高比例 */
  margin-left: 0; /* 小屏幕下可以去掉左边距，避免挤压 */
}

可选：用媒体查询精准控制小屏幕样式 #

如果想在特定屏幕宽度下强制让子元素占满整行，可以添加媒体查询：

@media (max-width: 768px) {
  .front, .front-img {
    flex-basis: 100%; /* 小屏幕下每个子项占满一行 */
  }
}

这样调整后，当你缩小页面宽度时，图片就会自动跑到.front（h1和h4）的下方，不会再出现横向滚动条啦～

内容来源于stack exchange