CSS Flex，不限制列表项的顺序

Question

我已经设法得到这个解决方案，每1,2等改变顺序....所以1,3,2,5,4但是无论如何要修改这个，所以无论有多少列表项和更多动态？

＆＃13;

＆＃13;

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

li:nth-child(1),
li:nth-child(3) {
  order: -3;
}

li:nth-child(2),
li:nth-child(5) {
  order: -2;
}

li:nth-child(4),
li:nth-child(7) {
  order: -1;
}

＆＃13;

<h1>TEST 1:</h1>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

<h1>TEST 2:</h1>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过一小段javascript在任意长度的列表中实现此效果。

从第三个列表项开始...

• 该脚本将采用第三个列表项并将其放在其前任
之前
• 然后它会进入第五个列表项并将其放在它之前 前身
• 然后它将进入第七个列表项等。

工作示例：

＆＃13;

＆＃13;

var lists = document.getElementsByTagName('ul');

for (var i = 0; i < lists.length; i++) {
    
    var items = lists[i].getElementsByTagName('li');
    
    for (var j = 2; j < items.length; j = j + 2) {
        lists[i].insertBefore(items[j], items[(j-1)]);
    }
    
}

＆＃13;

div {
float: left;
width: 100px;
}

＆＃13;

<div>
<h2>Test 1</h2>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
</div>

<div>
<h2>Test 2</h2>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>
</div>

<div>
<h2>Test 3</h2>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

无论如何都要修改这个，所以无论有多少列表项   而且更有活力？

如果它只是你要找的模式，图像和文本在每个2：nd行左右之间交换，你就可以这样做

ul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li {
  display: flex;
  width: calc(50% - 10px);
  margin: 5px;
  background: lightgray;
  box-sizing: border-box;
}
ul li:nth-child(4n+1) div:first-child,
ul li:nth-child(4n+2) div:first-child {
  order: 1;
}
ul li div:first-child {
  width: 66.66%;
  background: lightgreen;
  padding: 40px 10px;
  text-align: center;
}
ul li div:last-child {
  width: 33.33%;
  background: lightblue;
  padding: 40px 10px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  ul li {
    width: calc(100% - 10px);
  }
  ul li:nth-child(4n+1) div:first-child,
  ul li:nth-child(4n+2) div:first-child {
    order: 0;
  }
  ul li:nth-child(odd) div:first-child {
    order: 1;
  }
}

<ul>
    <li><div>1. image</div><div>text</div></li>
    <li><div>2. image</div><div>text</div></li>
    <li><div>3. image</div><div>text</div></li>
    <li><div>4. image</div><div>text</div></li>
    <li><div>5. image</div><div>text</div></li>
    <li><div>6. image</div><div>text</div></li>
    <li><div>7. image</div><div>text</div></li>
    <li><div>8. image</div><div>text</div></li>
    <li><div>9. image</div><div>text</div></li>
    <li><div>10. image</div><div>text</div></li>
    <li><div>11. image</div><div>text</div></li>
</ul>

如果它应该像链接页面上那样， Outdoor Bean Bags ，它们将项目组成4个组，那么它将进行标记更改，如此示例所示

div {
  display: flex;
  flex-direction: column;
}
div ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
}
div ul li {
  display: flex;
  width: calc(50% - 10px);
  margin: 5px;
  background: lightgray;
  box-sizing: border-box;
}
div ul li:nth-child(even),
div ul li:nth-child(odd) div:first-child {
  order: 1;
}
div ul li div:first-child {
  width: 66.66%;
  background: lightgreen;
  padding: 40px 10px;
  text-align: center;
}
div ul li div:last-child {
  width: 33.33%;
  background: lightblue;
  padding: 40px 10px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  div ul li {
    width: calc(100% - 10px);
  }
  div ul li:nth-child(even) {
    order: 0;
  }
}

<div>
  <ul>
    <li><div>1. image</div><div>text</div></li>
    <li><div>2. image</div><div>text</div></li>
    <li><div>3. image</div><div>text</div></li>
    <li><div>4. image</div><div>text</div></li>
  </ul>
  <ul>
    <li><div>5. image</div><div>text</div></li>
    <li><div>6. image</div><div>text</div></li>
    <li><div>7. image</div><div>text</div></li>
    <li><div>8. image</div><div>text</div></li>
  </ul>
  <ul>
    <li><div>9. image</div><div>text</div></li>
    <li><div>10. image</div><div>text</div></li>
    <li><div>11. image</div><div>text</div></li>
  </ul>
</div>