CSS Flex, не ограничивающий порядок элементов списка

Мне удалось получить это решение, чтобы изменить порядок каждые 1, 2 и т. Д.... так 1,3,2,5,4, но есть ли возможность изменить это так, не имеет значения, сколько элементов списка и более динамично?

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;
}
<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>

Источник

2 ответа

Решение

есть ли какие-то поправки, поэтому не имеет значения, сколько элементов списка и более динамично?

Если это только шаблон, который вы ищете, где изображение и текст меняются между левым и правым каждые 2-й ряд, вы можете сделать это следующим образом

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>

Если это должно быть как на связанной странице " Уличные бобовые мешки", которые структурировали свои элементы в группы по 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>

Источник

Вы можете достичь этого эффекта на любой длине списка с помощью короткого фрагмента JavaScript.

Начиная с третьего пункта списка...

  • сценарий возьмет третий элемент списка и поместит его перед предшественником
  • затем он перейдет к пятому элементу списка и поместит его перед своим предшественником
  • затем он перейдет к седьмому элементу списка и т. д.

Рабочий пример:

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)]);
    }
    
}
div {
float: left;
width: 100px;
}
<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>

Источник
Другие вопросы по тегам