css - 如何重新排列列网格？

Question

我有一个两列布局，里面有几个元素:

.grid {
  column-count: 2;
}

.grid-item {
  break-inside: avoid;
  height: 50px;
  margin-bottom: 10px;
  background-color: green;
  text-align: center;
  line-height: 50px;
  color: white;
}

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

https://codepen.io/Deka87/pen/RgdLeZ

现在我需要能够仅使用 CSS 重新排序列中的那些元素(因此它们在不同的屏幕分辨率下的顺序不同)，所以我想我可以这样做:

.grid {
  display: flex;
  flex-direction: column;
  column-count: 2;
}
.grid-item:nth-child(1) {
  order: 5;
}

显然，这没有用并且破坏了 2 列布局。以前有人试过解决这个问题吗？我有机会让这个工作吗？

PS:同一行上的元素不应该具有相同的高度(在这种情况下我可以使用简单的 float )。很抱歉没有在开始时指定。

Answer 1

如果容器上没有固定的高度，一列 flex 元素将不知道在哪里换行。没有什么会导致中断，因此元素将继续扩展单列。

此外，column-count 和display: flex 代表了两种不同的 CSS 技术。 column-count 不是 flex 容器中的有效属性。

CSS 网格布局可能对您有用:

调整屏幕宽度以触发媒体查询

revised codepen

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-rows: 50px;
  grid-auto-flow: column;
  grid-gap: 10px;
}

.grid-item {
  background-color: green;
  text-align: center;
  line-height: 50px;
  color: white;
}

@media ( max-width: 500px) {
  .grid-item:nth-child(2) {
    order: 1;
    background-color: orange;
  }
}

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>