如何根据视口调整内部div排列，实现PC端3列移动端1列布局

DevOps 小满

2026-10-2

实现方案

你之前用flex没实现大概率是漏掉了flex-wrap: wrap换行属性，下面提供两种纯CSS实现方案，都不需要修改原有HTML结构：

方案1：Flex布局

/* 移动端默认样式：单列排列 */
.vini {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 项间距，可自行调整 */
  padding: 16px;
  /* 如果需要限制容器高度加滚动，可取消下面两行注释
  max-height: 100vh;
  overflow-y: auto;
  */
}

.vino {
  height: 120px; /* 自定义项高度，可调整 */
  background: #f0f0f0; /* 仅为演示效果，可删除 */
}

/* PC端断点，可根据需求调整768px为你需要的阈值 */
@media (min-width: 768px) {
  .vini {
    flex-direction: row;
    flex-wrap: wrap; /* 开启自动换行，核心属性 */
  }
  .vino {
    /* 每行3个，减去两列间距的总宽度，根据你设置的gap调整计算值 */
    width: calc((100% - 32px) / 3);
  }
}

方案2：Grid布局（更简洁）

Grid布局对多列等宽场景适配更友好，无需手动计算元素宽度：

.vini {
  display: grid;
  gap: 16px;
  padding: 16px;
  grid-template-columns: 1fr; /* 移动端默认1列 */
  /* 如需滚动可取消下面两行注释
  max-height: 100vh;
  overflow-y: auto;
  */
}

.vino {
  height: 120px;
  background: #f0f0f0;
}

@media (min-width: 768px) {
  .vini {
    grid-template-columns: repeat(3, 1fr); /* PC端固定3列 */
  }
}