Поменять местами элементы в CSS

225
08 января 2022, 11:40

Есть список из элементов, первые два занимают по 25% ширины, а каждый третий 50%.
Размещены по три в строке, сколько будет элементов неизвестно, это посты блога которые выводятся циклом вордпресса.

Сложность в том чтобы каждый 6й элемент с его стилями стал на начало строки, поменялся местами с 4м и 5м и так далее

Пробовал применять свойство order:-1 для каждого 6го элемента - не помогло, так как он улетает в начало списка

.parent { 
  display: flex; 
  max-width: 400px; 
  flex-wrap:wrap; 
} 
 
.child { 
    display: block; 
    height: 20px; 
    width: 24%;     
    background-color: #CCCCCC;     
    margin: 2px; 
} 
 
.child:nth-child(3n) { 
  width: 48%;  
} 
 
.child:nth-child(6n) { 
  background-color: #fa5a5a; 
  order:-1; 
}
<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div>

Answer 1

Хм.. Думал, что с display: grid получится красивое решение, а получилось какое-то костыльное. Либо я им пользоваться не умею, либо он для такого не предназначен. В любом случае, костыльный велосипед работает:

section { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-gap: 8px; 
} 
 
div { 
  line-height: 2em; 
  background-color: silver; 
} 
 
div:nth-child(3n) { 
  grid-column: span 2; 
} 
 
div:nth-child(6n) { 
  background-color: #fa5a5a; 
  transform: translateX(-100%) translateX(-8px); 
} 
 
div:nth-child(6n + 4), div:nth-child(6n + 5) { 
  transform: translateX(200%) translateX(16px); 
}
<section> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
  <div>4</div> 
  <div>5</div> 
  <div>6</div> 
  <div>7</div> 
  <div>8</div> 
  <div>9</div> 
  <div>10</div> 
  <div>11</div> 
  <div>12</div> 
  <div>13</div> 
  <div>14</div> 
  <div>15</div> 
  <div>16</div> 
  <div>17</div> 
  <div>18</div> 
  <div>19</div> 
  <div>20</div> 
  <div>21</div> 
  <div>22</div> 
  <div>23</div> 
  <div>24</div> 
  <div>25</div> 
  <div>26</div> 
  <div>27</div> 
  <div>28</div> 
  <div>29</div> 
  <div>30</div> 
</section>

Answer 2

Flex тут не поможет, но можно воспользоваться более классическими способами:

section { 
  margin-bottom: -8px; 
} 
 
div { 
  display: inline-block; 
  width: calc(25% - 6px); 
  margin: 0 8px 8px 0; 
  line-height: 2em; 
  background-color: silver; 
} 
 
div:nth-child(6n + 3) { 
  width: calc(50% - 4px); 
  margin-right: 0; 
} 
 
div:nth-child(6n) { 
  width: calc(50% - 4px); 
  background-color: #fa5a5a; 
  float: left; 
} 
 
div:nth-child(6n + 5) { 
  margin-right: 0; 
}
<section> 
     <div>1</div><!-- 
  --><div>2</div><!-- 
  --><div>3</div><!-- 
  --><div>4</div><!-- 
  --><div>5</div><!-- 
  --><div>6</div><!-- 
  --><div>7</div><!-- 
  --><div>8</div><!-- 
  --><div>9</div><!-- 
  --><div>10</div><!-- 
  --><div>11</div><!-- 
  --><div>12</div><!-- 
  --><div>13</div><!-- 
  --><div>14</div><!-- 
  --><div>15</div><!-- 
  --><div>16</div><!-- 
  --><div>17</div><!-- 
  --><div>18</div><!-- 
  --><div>19</div><!-- 
  --><div>20</div><!-- 
  --><div>21</div><!-- 
  --><div>22</div><!-- 
  --><div>23</div><!-- 
  --><div>24</div><!-- 
  --><div>25</div><!-- 
  --><div>26</div><!-- 
  --><div>27</div><!-- 
  --><div>28</div><!-- 
  --><div>29</div><!-- 
  --><div>30</div> 
</section>

PS: Комментарии нужны чтобы избавиться от пробелов.

READ ALSO
Новогодний конкурс 2020 года!
CSS

Новогодний конкурс 2020 года!

В прошлом году подобный конкурс неожиданно привлек большой интерес участников RUso

 311
Странно работает cin.get() после обработки ctrl+c
c++

Странно работает cin.get() после обработки ctrl+c

Суть программы в том, что пользователь вводит строку, которая посимвольно считывается и выводится на экранРеализована обработка ctrl+c, в результате...

 87
Ассемблер зациклился
c++

Ассемблер зациклился

Есть задание "Образовать строку из исходной, повторив 1-й и элемент 1 раз, 2-й элемент 2 раз, 3 и элемент – 3 раза и тд" на с++ с ассемблерными вставками

 102
Принципы ООП. Интерфейс
c++

Принципы ООП. Интерфейс

Пишу класс для работы с матрицамиУказатель и кол-во строк и столбцов сокрыто, это понятно

 95