Как изменить порядок CSS Flexbox
У меня есть гибкий контейнер с элементами flex-direction: row и n, у них нет фиксированной высоты или ширины. На рабочем столе я показываю 2 столбца с точным порядком. На мобильном телефоне это один столбец, но порядок не тот, который мне нужен. В основном я хочу показать элементы из второго столбца после элементов из первого столбца. Как переупорядочить их, чтобы добиться желаемого результата? Вот пример.
На рабочем столе две колонки
item1 item2
item3 item4
item5 item6
Желаемый результат с одним столбцом
item1
item3
item5
item2
item4
item6
Вот html и css
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 50%;
}
@media only screen and (max-width: 520px) {
.item {
flex: 100%;
}
}<div class = "container">
<div class = "item">item1</div>
<div class = "item">item2</div>
<div class = "item">item3</div>
<div class = "item">item4</div>
<div class = "item">item5</div>
<div class = "item">item6</div>
</div>@MaikLowrey, в этом нет ничего необычного, я добавил HTML и CSS к вопросу.
Почему бы вам не поместить два столбца в родительский flex-контейнер и просто передать flex-обертку родителю? Потому что в вашем первом столбце уже элементы расположены по порядку 1,3,5. Итак, как только второй столбец завершится, вы получите желаемый результат. Или вы хотите иметь класс с каждым элементом и т. д., а затем обрабатывать свойство заказа?
@WahabShah Ваша идея хороша. вы можете показать это как другой ответ :)
@WahabShah с точки зрения построения HTMl в цикле, это нецелесообразно
Ответы 3
Вы можете использовать свойство order с flexbox. Вот ресурс => https://developer.mozilla.org/en-US/docs/Web/CSS/заказ
@media (max-width: 520px) {
.item:nth-child(1) {
order: 1;
}
.item:nth-child(2) {
order: 4;
}
.item:nth-child(3) {
order: 2;
}
.item:nth-child(4) {
order: 5;
}
.item:nth-child(5) {
order: 3;
}
.item:nth-child(6) {
order: 6;
}
}
Вы можете использовать flex и order для этого:
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.item {
width: 50%;
padding-bottom: 20px;
}
@media screen and (max-width: 800px) {
.container {
flex-direction: column;
}
.item {
width: 100%;
}
.item3 {
order: 2;
}
.item5 {
order: 3;
}
.item2 {
order: 4;
}
.item4 {
order: 5;
}
.item6 {
order: 6;
}
}<div class = "container">
<div class = "item item1">item1</div>
<div class = "item item2">item2</div>
<div class = "item item3">item3</div>
<div class = "item item4">item4</div>
<div class = "item item5">item5</div>
<div class = "item item6">item6</div>
</div>Очень хороший! 1up!
элементы не закреплены за 6 элементами, поэтому это не сработает
@VladimirGatev посмотри мой ответ. он гибкий.
@doğukan это то, что я искал, спасибо
Просто добавьте это
.item:nth-child(2n - 1) {
order: -1;
}
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 50%;
}
@media only screen and (max-width: 520px) {
.item {
flex: 100%;
}
.item:nth-child(2n - 1) {
order: -1;
}
}<div class = "container">
<div class = "item">item1</div>
<div class = "item">item2</div>
<div class = "item">item3</div>
<div class = "item">item4</div>
<div class = "item">item5</div>
<div class = "item">item6</div>
</div>Привет. n как рассчитывается? Можно подробнее? потому что это стало nth-child(-1) - nth-child(1) - nth-child(3) - nth-child(5) - nth-child(7) и .... !
2n - 1 представляет все нечетные числа.
Можете ли вы поделиться соответствующим CSS, пожалуйста?