如何使用flex实现无序列表4列到2列的响应式布局切换

• 修正媒体查询逻辑，采用移动端优先规则：先定义移动端下的2列布局，再匹配≥768px的平板/桌面设备断点，切换为4列布局
• 移除.flex-item的flex: 1属性，避免元素自动拉伸占满剩余行宽，改用固定flex-basis明确控制每列占比
• 给.m-list-flex添加padding: 0清除无序列表默认左内边距，避免布局偏移
• 全局添加box-sizing: border-box规则，避免padding撑大元素宽度导致列数计算异常
• 将图片固定宽度改为max-width: 100%，实现响应式适配避免小屏溢出
• 删除原CSS末尾多余的闭合大括号，修复语法错误

如果需要调整断点切换的阈值，仅需修改媒体查询中的min-width参数即可，比如希望屏幕宽度≥992px才切换为4列，将min-width: 768px改为min-width: 992px即可。

修改后的完整CSS代码 #

* {
  box-sizing: border-box;
}

div {
  display: block;
  text-align: center;
}

.container {
  max-width: 1000px;
  width: 100%;
  margin: auto;
  padding: 0 15px;
}

img {
  max-width: 100%;
  padding: 10px;
}

.m-list-flex {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.m-list-flex .h-flex-columns {
  display: flex;
  flex-direction: column;
}

.m-list-flex .h-center-items {
  text-align: center;
  align-items: center;
  justify-content: center;
}

.m-list-flex .flex-item {
  flex-basis: 50%;
  padding: 30px;
  margin-bottom: 6rem;
}

@media screen and (min-width: 768px) {
  .container {
    width: 600px;
  }
  .m-list-flex .flex-item {
    flex-basis: 25%;
  }
}

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