如何在不修改HTML的情况下，用Flex维持两列布局并调整元素位置

可以在不修改HTML结构的前提下，通过调整CSS实现需求，具体操作如下：

• 调整元素7和8的order值，确保7的排序优先级高于8，让7在8之前显示
• 利用margin-left: auto将7和8强制对齐到右侧列，同时保持原有列宽

修改后的完整CSS代码：

.items {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: #cecece;

  padding: 10px;
  margin: 20px;
}

.item {
  height: 100%;
  flex: 0 0 calc(50% - 8px);
  margin: 4px;
  background: #16B6B6FF;
}

/* 调整第7个元素的排序和位置 */
.items .item:nth-child(7) {
  order: 7;
  margin-left: auto;
}

/* 调整第8个元素的排序和位置 */
.items .item:nth-child(8) {
  order: 8;
  margin-left: auto;
}

效果说明 #

前6个元素会按照order属性的1-6值正常排列成3行两列；元素7通过margin-left: auto被推到右侧列，占据单独一行的右侧位置；元素8紧随其后，同样通过margin-left: auto对齐到右侧列，显示在元素7的下方，完全符合预期布局。

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