Css 根据动态显示在其中一个div中的一个类对div重新排序

我在flex容器中订购

div

s时遇到一些问题。 对我来说，最具挑战性的是修改我的7个食谱的顺序，其中一个是“扩展”类

当我点击一个配方时，它从有限的大小（

250px

）变为

100%

宽。我想避免一行包含两个配方，一行包含一个折叠配方和一个扩展配方，例如：

这是我的HTML（

。recipes

是flex容器），第7个配方已展开：

<section class="recipes">
  <div class="recipe collapsed" id="recipe1">
  <div class="recipe collapsed" id="recipe2">
  <div class="recipe collapsed" id="recipe3">
  <div class="recipe collapsed" id="recipe4">
  <div class="recipe collapsed" id="recipe5">
  <div class="recipe collapsed" id="recipe6">
  <div class="recipe expanded" id="recipe7">
</section>

由于我的HTML是动态更新的（一次只更新一个扩展的菜谱：如果第二个菜谱被扩展，第一个菜谱将用JS折叠），我如何能够按照以下方式订购6个折叠的菜谱+一个扩展的菜谱

如果展开了

#recipe4

，我需要以下顺序：

#recipe1.collapsed { order: 1; }
#recipe2.collapsed { order: 2; }
#recipe3.collapsed { order: 4; }
#recipe4.expanded { order: 3; }
#recipe5.collapsed { order: 5; }
#recipe6.collapsed { order: 6; }
#recipe7.collapsed { order: 7; }

---

如果扩展了另一个配方，我想设置另一个顺序

如果有3个元素的行，则需要按3个元素的组设置顺序，在每个组之间留出间隙，以便逐行重新排序：

示例使用

tabindex

以便div可以捕捉

：focus

.recipes{
显示器：flex；
柔性包装：包装；
}
.食谱{
宽度：30vw；
高度：50px；
利润率：0.5vw；
边框：实心；
框大小：边框框；
}
.秘诀：专注{
宽度：92vw；
颜色：红色
}
分区：焦点：第n个孩子（2），分区：焦点：第n个孩子（3）{
顺序：1！important/*important用于用#recipeX覆盖选择器，在自己使用时请注意。通过增加选择器的特定性来摆脱！important*/
}
分区：焦点：第n个孩子（5），分区：焦点：第n个孩子（6）{
顺序：6！important/*important用于用#recipeX覆盖选择器，在自己使用时请注意。通过增加选择器的特定性来摆脱！important*/
}
/*这些div可以通过nth-child（）而不是ID分配顺序（可以通过脚本中的循环创建）*/
#recipe1{顺序：3；}
#recipe2{顺序：4；}
#recipe3{顺序：5；}
#倒数4{顺序：9；}
#倒数5{顺序：10；}
#交互6{顺序：11；}
#recipe7{顺序：15；}
/*演示目的*/
节{计数器重置：divs}
section div{计数器增量：divs；显示：flex；对齐项：中心；对齐内容：中心；}
节div:在{内容：计数器（divs）}之前

---

您可以使用一个简单的JavaScript代码：

var items = document.querySelectorAll(".recipe"); // get all recipes
items.forEach(function(item) {
    item.onclick = function() { // add onClick event
        var item_index = Array.prototype.indexOf.call(items, item); // find the index of the item which is clicked

        // Add 1 to (index+1) until it reaches the clicked item
        var plus = 1;
        items.forEach(function(item,index) {
            if (index == item_index)
                plus = 0;
            item.style.order = index+1+plus;
        });

        // set the order of clicked item to 1
        this.style.order = 1;
    }
});

---

尝试显示：flex；在这段代码中，我将单击项的顺序设置为1。您可以轻松地将其更改为3不幸的是，由于我的flex box生成了3、2和1个配方行，您的代码不允许我在div上动态设置不同的顺序。@GCyrilius为什么要使用两次“div:focus:nth child（2），div:focus:nth child（3）{顺序：1！重要}”拜托？@Genia，噢，刚刚注意到你的信息和额外/加倍的代码。错误

var items = document.querySelectorAll(".recipe"); // get all recipes
items.forEach(function(item) {
    item.onclick = function() { // add onClick event
        var item_index = Array.prototype.indexOf.call(items, item); // find the index of the item which is clicked

        // Add 1 to (index+1) until it reaches the clicked item
        var plus = 1;
        items.forEach(function(item,index) {
            if (index == item_index)
                plus = 0;
            item.style.order = index+1+plus;
        });

        // set the order of clicked item to 1
        this.style.order = 1;
    }
});