如何在开启flex-wrap的4个div行中始终让第3个div居中

要实现蓝色div始终居中，且窗口缩小时优先处于首行，可以通过以下调整实现：

核心思路 #

• 利用margin: 0 auto让蓝色div在flex容器中自动居中，不受其他元素位置干扰
• 通过order属性结合媒体查询，在窗口宽度不足以容纳所有元素时，将蓝色div调整到首行
• 调整flex容器的对齐方式，确保其他元素正常换行排列

修改后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>RoutingTest</title>
  <base href="/" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <style>
    .flex-container {
      display: flex;
      flex-wrap: wrap;
      column-gap: 40px;
      row-gap: 10px;
      align-items: center;
      justify-content: flex-start; /* 改为flex-start，让其他元素靠左排列 */
      padding: 0 20px;
    }
    .blue-box {
      width: 340px;
      height: 40px;
      background-color: blue;
      color: white;
      display: flex;
      justify-content: center;
      margin: 0 auto; /* 关键：自动左右外边距实现居中 */
    }
    /* 媒体查询：当窗口宽度小于所有元素总宽度（含间隙）时，调整蓝色div的顺序 */
    @media (max-width: 1368px) { /* 274+40+240+40+340+40+474 = 1368px */
      .blue-box {
        order: -1; /* 让蓝色div排到最前面 */
        margin-bottom: 10px; /* 手动添加行间距，避免和原row-gap冲突 */
      }
    }
  </style>
</head>
<body>
  <div style="width: 100%; display: flex; justify-content: center">|</div>
  <div class="flex-container">
    <div style="width: 274px; height: 40px; background-color: red"></div>
    <div style="width: 240px; height: 40px; background-color: green"></div>
    <div class="blue-box">|</div>
    <div style="width: 474px; height: 40px; background-color: purple"></div>
  </div>
</body>
</html>

效果说明 #

• 宽屏状态：蓝色div通过margin: 0 auto自动居中，其他元素分布在其两侧
• 中等宽度：窗口不足以容纳所有元素在一行时，蓝色div保持居中，其他元素自动换行到上下行
• 窄屏状态：窗口宽度小于所有元素总宽度时，蓝色div通过order: -1移到首行并保持居中，其他元素在下方换行排列

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