css - 两列布局，无需 JavaScript 即可重新排序元素

Question

有没有办法通过媒体查询将 2 列布局转换为 1 列布局？

2 列布局的条件:

元素应在列内依次流动

列中的元素将具有不同的高度

元素位置(顺序)可以通过 html 标记元素位置施加

1 列布局的条件:

元素应该一个接一个地流动

列内的元素将具有不同的高度

元素位置 (!) 不能被 html 标记强加(应该是
由 css 控制)

我一直在考虑两个单独的列容器 - 但是当布局变为 1 列时，该构造阻止了我在列之间重新排序(混合)元素。我似乎所有元素都应该放在一个容器中 - 那么对于 1 列布局，flex 可用于重新排序，但在这种情况下如何实现 2 列布局？

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

<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

Conditions for 2 column layout:

1. items should flow one after another within columns
2. items within columns will have different heights
3. item position (order) can be imposed by html markup element position

这正是 CSS Columns 所做的。

Conditions for 1 column layout:

1. items should flow one after another
2. items within columns will have different heights
3. item position (!) cannot be imposed by html markup (should be controlled over 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