如何实现宽屏不换行、窄屏自动换行的Flex布局？

问题原因 #

宽屏状态下子容器提前换行，大概率是因为子容器的flex属性配置不当，或者没有考虑box-sizing导致实际宽度超出父容器。

解决方案 #

通过合理设置flex属性+媒体查询，实现宽屏70%/30%并排、窄屏垂直占满的效果：

HTML结构 #

<div class="main">
  <div class="child child-left">左侧容器</div>
  <div class="child child-right">右侧容器</div>
</div>

CSS样式 #

.main {
  display: flex;
  flex-wrap: wrap; /* 保留wrap，窄屏时自动触发换行 */
  gap: 12px; /* 可选：添加子容器间距，提升视觉体验 */
}

/* 宽屏规则：固定比例并排 */
.child-left {
  flex: 0 0 70%; /* 不放大、不缩小，基准宽度70% */
  box-sizing: border-box; /* 确保padding/border不超出宽度比例 */
}

.child-right {
  flex: 0 0 30%; /* 不放大、不缩小，基准宽度30% */
  box-sizing: border-box;
}

/* 窄屏规则：垂直排列并占满宽度 */
@media (max-width: 768px) {
  .child-left, .child-right {
    flex: 1 0 100%; /* 占满父容器宽度，允许自动缩放 */
  }
}

关键细节说明 #

• flex: 0 0 [宽度]：这是核心配置，flex-grow:0禁止子容器放大，flex-shrink:0禁止缩小，确保宽屏时严格按比例分配空间，不会触发换行
• box-sizing: border-box：避免子容器的内边距、边框额外占用宽度，导致总宽度超过100%
• 媒体查询断点（768px）可根据实际需求调整，比如改成992px适配更大的窄屏设备

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