在指定的屏幕宽度后将一半的项目换成一行

Question

我有一排由 flex 定位的 6 个项目。

1 2 3 4 5 6

但是在例如600px我想把它们切成两半，然后移到另一排。

1 2 3 
4 5 6

我可以使用flex-wrap: wrap，但它会为每个指定的屏幕宽度包装一个元素。 感谢您的帮助。

PS。我不想使用display: none 和重复元素。

.wrapper {
  display: flex;
}

.b {
  margin: 12px;
  width: 100px;
  height: 60px;
  background: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

@media screen and (max-width: 600px) {
  .wrapper {
    flex-wrap: wrap;
  }
}

<div class="wrapper">
  <div class='b'>1</div>
  <div class='b'>2</div>
  <div class='b'>3</div>
  <div class='b'>4</div>
  <div class='b'>5</div>
  <div class='b'>6</div>
</div>

Answer 1

使用伪元素在 2 组元素之间创建分隔：

.wrapper {
  display: flex;
}

.b {
  margin: 12px;
  width: 100px;
  height: 60px;
  background: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

@media screen and (max-width: 600px) {
  .wrapper {
    flex-wrap: wrap;
  }
  .wrapper::after {
     content:"";
     flex-basis:100%;
  }
  .wrapper .b:nth-child(n + 4) { /* the last 3 element after the "after" */
    order:2;
  }
}

/* we no more need it under 400px */
@media screen and (max-width: 400px) {
  .wrapper::after {
     content:none;
  }
}

<div class="wrapper">
  <div class='b'>1</div>
  <div class='b'>2</div>
  <div class='b'>3</div>
  <div class='b'>4</div>
  <div class='b'>5</div>
  <div class='b'>6</div>
</div>