如何调整Flex Box代码以匹配预期设计需求？

针对小屏状态的问题，修改代码如下：

.container {
  display: flex;
  justify-content: flex-start; /* 明确默认对齐方式，避免换行后出现异常 */
}

.item {
  width: 100px;
  height: 100px;
}

.item:nth-child(1) {
  background: green;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: blue;
  margin-left: auto; /* 大屏状态保持靠右对齐 */
}

@media screen and (max-width: 720px) {
  .container {
    flex-wrap: wrap;
  }
  .item:nth-child(2) {
    order: 3;
    width: 100%; /* 让红色方块撑满整行 */
  }
  .item:nth-child(3) {
    margin-left: auto; /* 利用Flex自动margin特性实现靠右，无需手动计算宽度 */
  }
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

调整说明 #

1. 大屏状态：绿色、红色方块靠左，蓝色方块通过margin-left: auto自动填充左侧剩余空间，实现靠右对齐，完全匹配需求；
2. 小屏状态：
   • 容器开启换行后，绿色方块在第一行左侧，蓝色方块通过margin-left: auto自动靠右，占据第一行右侧位置；
   • 红色方块设置order:3调整到最后，同时设置width:100%撑满整行，单独占据第二行，符合设计要求。

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