Flex布局求助：首行1个元素、后续每行3个元素实现难题

核心思路是通过媒体查询针对不同断点调整元素的flex-basis，同时利用justify-content: center实现最后一行居中对齐，确保首行元素单独占一行且尺寸逻辑与其他行保持一致。

完整CSS代码 #

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; /* 实现最后一行不足数量时居中 */
  gap: 2%; /* 控制元素间距，替代宽度余量，布局更直观 */
  padding: 0;
  list-style: none;
}

/* 堆叠布局（每行1个）：默认适配小屏幕 */
li {
  flex: 0 0 100%;
}

/* 每行2个元素的断点（示例设为768px，可按需调整） */
@media (min-width: 768px) {
  li {
    flex: 0 0 48%;
  }
  li:first-of-type {
    flex: 0 0 100%; /* 强制首行单独占一行 */
  }
}

/* 每行3个元素的断点（示例设为1024px，可按需调整） */
@media (min-width: 1024px) {
  li {
    flex: 0 0 31.333%; /* 3个元素+2%gap，刚好填满一行 */
  }
  li:first-of-type {
    flex: 0 0 100%; /* 强制首行占满一行 */
  }
}

关键细节说明 #

• justify-content: center：直接给父容器ul设置该属性，天然满足最后一行元素不足时的居中需求，无需额外hack。
• gap：用间距替代元素宽度的百分比余量，避免手动计算宽度时的误差，布局逻辑更清晰。
• flex: 0 0 [宽度值]：设置flex-shrink: 0防止元素被挤压变形，保证各元素尺寸稳定。
• 媒体查询中的首元素处理：针对不同行数断点，给第一个li设置flex-basis: 100%，强制它单独占满一行，彻底解决原代码中首元素无法单独成行的问题。

原代码失效原因 #

原代码给第一个li设置flex: 0 1 50%，在每行3个元素的场景下，50%的宽度不足以占满一行，同时其他li的48%宽度会导致首元素与后方元素挤在同一行，无法实现预期布局。

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