仅使用CSS实现容器内指定div组逆序交换的开发问题

解决方案 #

可以通过 Flex 布局的 order 属性实现子元素的自定义排序，无需修改HTML结构，仅需新增CSS规则即可实现需求，有两种实现方案可选：

方案1：显式指定所有元素顺序（可读性更高，不易出错） #

/* 给column容器开启纵向flex布局 */
.column {
  display: flex;
  flex-direction: column;
}

/* A、B逆序 */
.column div:nth-child(1) { order: 2; }
.column div:nth-child(2) { order: 1; }

/* C、D保持原顺序 */
.column div:nth-child(3) { order: 3; }
.column div:nth-child(4) { order: 4; }

/* E、F逆序 */
.column div:nth-child(5) { order: 6; }
.column div:nth-child(6) { order: 5; }

方案2：利用默认order值（代码更简洁） #

Flex子元素默认的order值为0，我们只需要调整AB和EF的order值，CD保持默认即可自动排在中间：

.column {
  display: flex;
  flex-direction: column;
}

/* A、B逆序，order值小于0，排在最前面 */
.column div:nth-child(1) { order: -1; }
.column div:nth-child(2) { order: -2; }

/* E、F逆序，order值大于0，排在最后面 */
.column div:nth-child(5) { order: 2; }
.column div:nth-child(6) { order: 1; }

实现原理 #

Flex布局下，子元素的排列顺序由order属性决定，数值越小的元素排列位置越靠前：

• 方案2中，B的order为-2，A为-1，所以排在最前两位，实现AB逆序
• C、D默认order为0，按原有DOM顺序排在中间，保持不变
• F的order为1，E为2，排在最后两位，实现EF逆序

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