两列布局，无需JavaScript即可重新排序项目

Question

有没有办法获得2列布局，使用媒体查询转换为1列布局？

2列布局的条件：

1. 项目应在列内一个接一个地流动
2. 列中的项目将具有不同的高度
3. 项目位置（顺序）可以由html标记元素位置强加

1列布局的条件：

1. 物品应该一个接一个地流动
2. 列中的项目将具有不同的高度
3. 项目位置（！）不能由html标记强加（应该通过css控制）

我一直在考虑为列提供两个独立的容器 - 但是当布局变为1列时，该构造阻止我在列之间重新排序（混合）元素。我似乎应该将所有元素放在一个容器中 - 然后对于1列布局flex可以用于重新排序，但是在这种情况下如何实现2列布局？

要模拟媒体查询行为，请从主容器中删除类“one-column”。

<div id="container" class="one-column"> -> <div id="container" class="">

在这个概念中，主要问题是列（2列布局）中的项目不是一个接一个地直接流动（右列中的项目之间存在间隙）。

这是我到目前为止取得的成就：

* {
  box-sizing: border-box;
}
div {
  width: 100%;
  height: 100px;
  float: left;
}
#container.one-column {
  display: flex;
  flex-direction: column;
  height: auto;
}
#container {
  display: block;
}
.col1 {
  width: 60%;
  background-color: red;
  height:300px;
  float: left;
}
.col2 {
  width: 40%;
  background-color: blue;
  border: 1px solid white;
  float: right;
}
.one-column > div {
  width: 100%;
}

<div id="container" class="one-column">
  <div class="col1" style="order:2;">
    ONE
  </div>
  <div class="col2" style="order:1;">
    TWO
  </div>
  <div class="col1" style="order:4;">
    THREE
  </div>  
  <div class="col2" style="order:3;">
    FOUR
  </div>
</div>

的jsfiddle：https://jsfiddle.net/3b6htt1d/40/

Answer 1

2列布局的条件：

1. 项目应在列内一个接一个地流动
2. 列中的项目将具有不同的高度
3. 项目位置（顺序）可以由html标记元素位置强加

这正是CSS Columns所做的。

1列布局的条件：

1. 物品应该一个接一个地流动
2. 列中的项目将具有不同的高度
3. 项目位置（！）不能由html标记强加（应该通过css控制）

这正是人们可以用Flexbox和column方向做的事情。

---

因此，如果将两者结合起来，对于2列，它们将如左图所示从上到下流动，对于1列，您可以使用order控制它们的位置。

有了这个，你可以避免固定的高度，并获得动态/灵活大小的项目。

Updated fiddle

堆栈代码段

* {
  box-sizing: border-box;
}
div {
  width: 100%;
  height: 100px;
}
#container.one-column {
  display: flex;
  flex-direction: column;
  height: auto;
}
.col1 {
  width: 60%;
  background-color: red;
  height:300px;
}
.col2 {
  width: 40%;
  background-color: blue;
  border: 1px solid white;
}
.one-column > div {
  width: 100%;
}

@media (min-width: 500px) {
  #container.one-column {
    display: block;
    columns: 2;
  }
  #container.one-column > div {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .zcol1 ~ .col1 {
    background-color: yellow;
    height:100px;
  }
}

<div id="container" class="one-column">
  <div class="col1" style="order:2;">
    ONE
  </div>
  <div class="col2" style="order:1;">
    TWO
  </div>
  <div class="col1" style="order:4;">
    THREE
  </div>  
  <div class="col2" style="order:3;">
    FOUR
  </div>
</div>

---

这是我的另一个答案，可能是另一种选择，将Flexbox与float相结合。

• Prevent next row taking up height of tallest item in previous row with flexbox?

---

根据评论更新

这是一个结合了Flexbox和float的版本，它产生了屏幕截图显示的布局：

• Updated demo

Answer 2

您还应使用flex进行2列布局。

唯一真正的问题是在你想要它的位置强制换行。

最好的方法是在容器上设置一定的高度。在这种情况下，强制包装可以使用伪元素完成：

* {
  box-sizing: border-box;
}
div {
  width: 100%;
  height: 100px;
  border: 1px solid white;
}
.container {
  display: flex;
  flex-direction: column;
  height: auto;
  margin-top: 5px;
}
.col1 {
  width: 60%;
  background-color: red;
  height:300px;
}
.col2 {
  width: 40%;
  background-color: blue;
}
.one-column > div {
  width: 100%;
}
.two-column {
    flex-wrap: wrap;
    max-height: 800px;
}
.two-column:after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: yellow;
    order: 2;
    margin-top: 1000px;
}
.two-column .col1 {
    order: 1;
}
.two-column .col2 {
    order: 3;
}

<div class="container two-column">
  <div class="col1">
    ONE
  </div>
  <div class="col2">
    TWO
  </div>
  <div class="col1">
    THREE
  </div>  
  <div class="col2">
    FOUR
  </div>
</div>
<div class="container one-column">
  <div class="col1">
    ONE
  </div>
  <div class="col2">
    TWO
  </div>
  <div class="col1">
    THREE
  </div>  
  <div class="col2">
    FOUR
  </div>
</div>