Flex布局中两列设为60%/40%后媒体查询异常问题求助

核心思路是利用Flex布局的flex简写属性精确控制列宽比例，同时确保媒体查询样式能正确覆盖桌面端设置，避免冲突。

修改要点 #

• 移除.container .columns中固定的width:50%和flex:0 0 auto，保留Flex基础特性
• 给图片列、文本列分别设置flex属性分配60%/40%的宽度比例
• 在媒体查询中用flex属性覆盖桌面端设置，确保小屏幕下两列均占满100%宽度

修改后的完整代码 #

CSS部分

@import url("https://fonts.googleapis.com/css2?family=Assistant&display=swap");
@import url("https://use.typekit.net/yoj6eqg.css");

* {
  padding: 0;
  margin: 0;
}
body {
  overflow-x: hidden;
}
.container {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 5% 15% 5% 15%;
}

.container .columns {
  /* 移除固定宽度，保留Flex基础特性 */
  flex: 1;
}

.container .columns.image {
  flex: 0 0 60%; /* 不放大不缩小，基础宽度60% */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container .columns.content {
  flex: 0 0 40%; /* 不放大不缩小，基础宽度40% */
}

.container .columns.content .content-container {
  padding: 40px 50px;
  background-color: #e6e6e6;
}
.container .columns.content .content-container h1 {
  font-weight: 700;
  font-size: 35px;
  color: #86b530;
  margin-bottom: 20px;
  font-family: "p22-underground", sans-serif;
  font-weight: 600;
  font-style: strong;
}
.container .columns.content .content-container p {
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  margin-bottom: 20px;
  margin-bottom: 15px;
  text-align: justify;
  font-family: "Assistant", sans-serif;
}
@media screen and (max-width: 767px) {
  .container {
    flex-flow: row wrap;
  }
  .container .columns.image {
    display: block;
    order: 1;
    flex: 0 0 100%; /* 覆盖桌面端设置，占满宽度 */
    height: 250px;
  }
  .container .columns.content {
    display: block;
    order: 2;
    flex: 0 0 100%; /* 覆盖桌面端设置，占满宽度 */
  }
  .container .columns.content .content-container {
    padding: 20px 35px;
  }
  .container .columns.content .content-container h1 {
    margin-bottom: 5px;
  }
}

HTML部分（无需修改）

<div class="container">
    <div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="columns image">
    </div>
    <div class="columns content">
        <div class="content-container">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor
                sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
                aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet,
                consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
                erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Ut wisi enim ad minim veniam, quis nostrud.</p>
        </div>
    </div>
</div>

说明 #

• flex: 0 0 [宽度比例]精确控制列宽，同时关闭自动伸缩（flex-grow:0、flex-shrink:0），避免内容变化导致布局变形
• 媒体查询中用相同优先级选择器设置flex:0 0 100%，确保小屏幕样式完全覆盖桌面端配置，解决原异常问题
• 全程保留Flex布局特性，无需切换到Grid

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