Как изменить порядок элементов Flex при изменении размера экрана? - PullRequest
Новая
       17

Как изменить порядок элементов Flex при изменении размера экрана?

2 голосов
/ 07 апреля 2019

Используя медиазапрос и flexbox, я могу только изменить порядок содержимого во втором ряду. Я хочу переключить порядок с первого ряда на второй, но не могу найти решение.

Я пытался изменить другой номер заказа, и он никак не влияет. 

.item {
  width: 99%;
  height: 200px;
  background-color: blueviolet;
  display: flex;
}

.item1 {
  background-color: blue;
  width: 33%;
  height: 200px;
}

.item2 {
  background-color: cyan;
  width: 33%;
  height: 200px;
}

.item3 {
  background-color: red;
  width: 33%;
  height: 200px;
}

@media screen and (max-width: 500px) {
  div#item {
    order: 0
  }
  div#item1 {
    order: 3
  }
  div#item2 {
    order: 4
  }
  div#item3 {
    order: 1
  }
}
<div class="item" id="item"></div>
<div style="display: flex">
  <div class="item1" id="item1"></div>
  <div class="item2" id="item2"></div>
  <div class="item3" id="item3"></div>
</div>

При изменении размера экрана я хочу изменить порядок между двумя строками. Например, при изменении размера экрана фиолетовый и синий меняют положение друг друга. Как это сделать?

result

Ответы [ 2 ]

0 голосов
/ 07 апреля 2019

Просто рассмотрите один контейнер flexbox для всех ваших элементов, как показано ниже: 

.container {
  display: flex;
  flex-wrap: wrap;
}

.container  > * {
  height: 100px;

}

.item {
  width: 100%;
  background-color: blueviolet;
}

.item1 {
  background-color: blue;
  width: calc(100%/3);
}

.item2 {
  background-color: cyan;
  width: calc(100%/3);
}

.item3 {
  background-color: red;
  width: calc(100%/3);
}

@media screen and (max-width: 500px) {
  .container > div {
    width:100%;
  }
  
  div.item {
    order: 2
  }
  div.item1 {
    order: 3
  }
  div.item2 {
    order: 4
  }
  div.item3 {
    order: 1
  }
}
<div class="container">
  <div class="item"></div>
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>
0 голосов
/ 07 апреля 2019

Первый ряд и второй ряд: разные флексбоксы - вы можете обернуть item в контейнер второго ряда и использовать упаковочный флексбокс с помощью flex-wrap: wrap.После заполнения первой строки и если в строке не осталось места, flex items перейдет к следующей строке.

Попробуйте изменить order для первого ряда ниже: 

.wrapper {
  display: flex; /* flexbox container */
  flex-wrap: wrap; /* wrap the flexbox */
}

.item {
  width: 99%;
  height: 200px;
  background-color: blueviolet;
  display: flex;
}

.item1 {
  background-color: blue;
  width: 33%;
  height: 200px;
}

.item2 {
  background-color: cyan;
  width: 33%;
  height: 200px;
}

.item3 {
  background-color: red;
  width: 33%;
  height: 200px;
}

@media screen and (max-width: 500px) {
  div#item {
    order: 5; /* see changed order below 500px */
  }
  div#item1 {
    order: 3;
  }
  div#item2 {
    order: 4;
  }
  div#item3 {
    order: 1;
  }
}
<div class="wrapper">
  <div class="item" id="item"></div>
  <div class="item1" id="item1"></div>
  <div class="item2" id="item2"></div>
  <div class="item3" id="item3"></div>
</div>
...