Flexbox换行时动态布局实现问题：移动端布局异常求助

核心问题是flex父容器默认不允许子元素换行，导致移动端空间不足时子元素被强制压缩，搭配flex-wrap属性和媒体查询调整小屏样式即可实现目标效果。

完整CSS配置 #

首先给外层div添加自定义类名container，避免全局样式污染：

.container {
  display: flex;
  /* 允许子元素超出容器宽度时自动换行，核心属性 */
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 16px;
}

/* 桌面端（≥768px）三列并排样式 */
.left, .right {
  /* 左右栏固定宽度，可按需调整为百分比 */
  flex: 0 0 200px;
  height: 240px;
  background-color: #f0f0f0;
}
.center {
  /* 中间栏自适应占满剩余宽度 */
  flex: 1;
  margin: 0 16px;
  height: 240px;
  background-color: #e0e0e0;
}

/* 移动端（<768px）换行布局样式，断点可根据业务需求调整 */
@media (max-width: 767px) {
  .center {
    /* 中间栏占满整行，排在第二行 */
    flex: 0 0 100%;
    /* 调整排序，让中间栏在左右栏下方展示，不需要排序可删除该行 */
    order: 3;
    margin: 16px 0 0 0;
  }
  .left, .right {
    /* 左右栏各占半行，减去小间距避免折行 */
    flex: 0 0 calc(50% - 8px);
  }
}

可选调整说明 #

• 767px是通用移动端断点，可根据实际设计稿调整断点数值
• 如果桌面端左右栏不需要固定宽度，可替换为百分比配置，比如flex: 0 0 20%
• 如果移动端需要左、中、右按顺序依次换行，直接删掉order属性即可

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