Question

我所拥有的是一个包含多个项目的双列布局：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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：同一行上的项目不应该具有相同的高度（在这种情况下我可以使用简单的浮点数）。很抱歉没有在开头指定。

Answer 1

如果容器上没有固定的高度，则一列弹性项目不知道包裹的位置。没有什么可以导致中断，因此项目将继续扩展单列。

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

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

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

revised codepen

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

我倾向于使用flexbox来实现这个

＆＃13;

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.grid-item {
  box-sizing: border-box;
  width: calc( 50% - 5px );
  min-height: 50px;
  margin-bottom: 10px;
  background-color: green;
  text-align: center;
  line-height: 50px;
  color: white;
}

.grid-item:nth-child(1) {
  order: 5;
}

＆＃13;

<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>

＆＃13;

灵活的语法得到广泛支持且非常灵活。

如何重新排列列网格？

2 个答案: