本文详解如何在保持 flexbox 结构的前提下，为不同列设置非等宽比例（如图片列 60%、文字列 40%），并确保响应式媒体查询仍能正确生效，避免因 `flex` 属性冲突导致布局错乱。
在 Flexbox 中实现精确的列宽比例（如 60% / 40%），关键在于分离通用 flex 基础声明与具体列的宽度控制。原代码中 .container .columns 统一设置了 flex: 0 0 auto; width: 50%，这适用于等宽场景，但一旦改为差异化宽度，若仍保留全局 width: 50%，就会覆盖子类的 width: 60% 或 40%，导致样式失效。
✅ 正确做法是：
- 移除 .container .columns 的通用 width 声明；
- 将 flex: 0 0 auto 提升为通用基础值（禁用弹性伸缩，仅按设定宽度渲染）；
- 分别为 .image 和 .content 指定 width，实现精准比例分配。
/* ✅ 推荐写法：解耦通用 flex 行为与具体列宽 */
.container .columns {
flex: 0 0 auto; /* 禁止 flex-grow/shrink，仅按 width 渲染 */
}
.container .columns.image {
width: 60%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container .columns.content {
width: 40%;
}
.container .columns.content .content-container {
padding: 40px 50px;
background-color: #e6e6e6;
}⚠️ 重要注意事项：媒体查询需同步更新
原 @media (max-width: 767px) 中，.columns.image 和 .columns.content 均设为 width: 100%，这本身合理（堆叠显示）。但若你希望在中屏（如平板）保留 60/40 比例，可在 768px–959px 区间新增媒体查询，或调整断点逻辑：
/* ? 补充建议：在中屏维持比例，小屏再堆叠 */
@media screen and (min-width: 768px) and (max-width: 959px) {
.container .columns.image { width: 60%; }
.container .columns.content { width: 40%; }
}
@media screen and (max-width: 767px) {
.container {
flex-flow: column; /* 更语义化的写法，替代 row wrap */
}
.container .columns {
width: 100%;
}
.container .columns.image {
height: 250px;
}
.container .columns.content .content-container {
padding: 20px 35px;
}
}? 额外优化提示：
- 使用 flex-flow: column 替代 flex-flow: row wrap 在小屏下更简洁；
- 若内容高度差异大，可为 .image 添加 min-height: 250px 防止塌陷；
- flex: 0 0 auto 是安全选择，它明确禁止 Flex 项拉伸或收缩，完全交由 width 控制尺寸——这对响应式列宽控制至关重要。
总结：Flexbox 的列宽控制本质是「显式宽度优先」，只要确保 flex-basis（即 width）不被父级通用规则覆盖，并在各断点中独立维护，就能灵活实现任意比例（30/70、25/75 等），无需迁移到 Grid。
