如何使用flexbox实现大屏4列、<768px移动端2列的响应式布局

问题原因 #

现有代码仅在屏幕宽度≥768px时才为.row设置flex布局，宽度<768px时.row和.col都保持默认块级元素属性，每个.col会独占整行，所以只能显示1列。同时没有配置flex换行规则，即便小屏启用flex布局也会将所有列挤在同一行无法自动折行。

极简修改方案 #

直接替换原有CSS即可实现需求，仅增加3行核心规则：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  /* 移动端默认2列 */
  flex-basis: 50%;
  box-sizing: border-box;
}
@media(min-width: 768px) {
  .col {
    /* 大屏4列 */
    flex-basis: 25%;
  }
}

可选扩展 #

如果需要列之间保留间距，只需给.row增加gap属性，同步调整.col的基础宽度即可，示例：

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.col {
  flex-basis: calc(50% - 8px);
  box-sizing: border-box;
}
@media(min-width: 768px) {
  .col {
    flex-basis: calc(25% - 12px);
  }
}

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