如何让flexbox容器内被打开的details元素移动到最后位置？

不需要额外添加专属类就能实现该需求，你的原有代码无法生效，主要有两个问题：

1. $('details').not(this)拿到的是jQuery对象，不能直接访问原生DOM的style属性，需要用jQuery的.css()方法操作样式
2. 原有逻辑仅支持同时展开1个details，多个展开时会出现排序混乱

最优实现方案 #

我们改用toggle事件监听（覆盖键盘触发的展开/收起操作），动态维护order值，确保最新展开的元素永远排在最后，代码修改如下：

CSS代码（仅在原有基础上增加了可选的样式优化） #

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
details {
  order: 1;
  width: 200px; /* 根据需求调整宽度触发换行 */
  border: 1px solid #eee;
  padding: 8px;
}

JavaScript代码 #

let currentMaxOrder = 1;
$('details').on('toggle', function () {
  if (this.open) {
    // 展开时order赋值为当前最大值+1，永远排在最后
    currentMaxOrder += 1;
    this.style.order = currentMaxOrder;
  } else {
    // 收起时恢复默认排序，回到原位置，不需要该逻辑可直接删除else块
    this.style.order = 1;
  }
});

HTML代码和原有代码完全一致，不需要修改 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <details>
    <summary>第一个details</summary>
    <p>示例内容</p>
  </details>
  <details>
    <summary>第二个details</summary>
    <p>示例内容</p>
  </details>
  <details>
    <summary>第三个details</summary>
    <p>示例内容</p>
  </details>
  <details>
    <summary>第四个details</summary>
    <p>示例内容</p>
  </details>
  <details>
    <summary>第五个details</summary>
    <p>示例内容</p>
  </details>
</div>

可选方案：添加专属类 #

如果你需要给展开状态的details增加特殊样式（比如特殊背景、边框），可以额外加专属类区分状态，不属于必须项，示例如下：

let currentMaxOrder = 1;
$('details').on('toggle', function () {
  // 切换opened类
  $(this).toggleClass('opened', this.open);
  if (this.open) {
    currentMaxOrder += 1;
    this.style.order = currentMaxOrder;
  } else {
    this.style.order = 1;
  }
});

你可以在CSS中自定义.opened类的样式。

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