Question

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

2列布局的条件：

项目应在列
列中的项目将具有不同的高度
项目位置（顺序）可以由html标记元素位置

1列布局的条件：

项目应该一个接一个地流动
列中的项目将具有不同的高度
项目位置（！）不能由html标记强加（应该是控制css）

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

要模拟媒体查询行为，请删除类＆＃34; one-column＆＃34;从主要容器。

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

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

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

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

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

Answer 1

2列布局的条件：


项目应在列
中一个接一个地流动
列中的项目将具有不同的高度

项目位置（顺序）可以由html标记元素位置
强加

这正是CSS Columns的作用。

1列布局的条件：


项目应该一个接一个地流动

列中的项目将具有不同的高度

项目位置（！）不能由html标记强加（应通过css控制）

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

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

通过这种方式，您可以避免固定高度并获得动态/灵活尺寸的物品。

Updated fiddle

Stack snippet

＆＃13;

* {
  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;
  }
}

＆＃13;

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

＆＃13;

这是我的另一个答案，可能是另一种选择，将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>

无需JavaScript即可重新排序项目的双列布局

2 个答案: