如何调整Flex布局列数实现桌面4列/平板2列/移动端1列自适应

你的代码存在以下问题：

• 给每个item设置了33%的固定宽度，导致桌面端最多只能一行放3个，无法实现一行4个的需求
• 没有配置响应式断点，窗口缩放时item宽度不会自动调整
• 重复给每个nth-child写了相同的样式，冗余度高

你可以按照以下方案调整：

修改后的完整CSS代码 #

/* 全局设置盒模型，避免边框、内边距撑宽元素导致布局异常 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* 可选：设置item之间的间距 */
  gap: 10px;
}

.item {
  /* 默认移动端布局：一行1个 */
  width: 100%;
  text-align: center;
  border: 1px solid #eee;
  padding: 20px 0;
}

/* 平板尺寸：≥768px 一行2个 */
@media screen and (min-width: 768px) {
  .item {
    /* 减去gap的宽度，避免宽度溢出换行，无间距可直接写50% */
    width: calc(50% - 5px);
  }
}

/* 桌面尺寸：≥1200px 一行4个 */
@media screen and (min-width: 1200px) {
  .item {
    /* 无间距可直接写25% */
    width: calc(25% - 7.5px);
  }
}

你可以根据自己的业务需求调整媒体查询的断点数值，不需要兼容老旧浏览器时可以删掉对应前缀。

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