响应式 CSS：到达媒体查询断点后将中间 div 行移动到单独的列

Posted 2023-03-05

【中文标题】响应式 CSS：到达媒体查询断点后将中间 div 行移动到单独的列

【英文标题】：Responsive CSS: shift middle div rows to a separate column after reaching media query break point

【发布时间】：2021-07-12 22:38:20

【问题描述】：

我正在使用 CSS 媒体查询来创建响应式布局。

在我当前的 html 布局中，我使用 flexbox 来对齐 div 行：

<div id="page">
  <div id="div-1">DIV 1</div>
  <div id="div-2">DIV 2</div>
  <div id="div-3">DIV 3</div>
  <div id="div-4">DIV 4</div>
</div>

和 CSS：

#page 
  display: flex;
  flex-direction: column;
  align-items: center;


[id^="div-"] 
  border: 1px solid #ccc;
  margin-bottom: 10px;
  width: 50vw;


#div-1 
  height: 50px;


#div-2 
  height: 70px;


#div-3 
  height: 150px;


#div-4 
  height: 100px;

这里是 Jsfiddle 供您修改。

这是我对较小视口的追求，但想在下一个媒体查询断点上进行切换，以使 2 个中间 div 转移到右侧的单独列，如下所示：

我如何做到这一点？对我来说如何将最后几行 div 移动到另一列是很明显的，但不确定如何处理中间行...

有没有办法通过使用 flexbox 或网格来做到这一点？

【参考方案1】：

另一种可能的解决方案是将 order-property 与 Flexbox 结合使用（缺点：您需要一点额外的 html 并设置 #page 容器的高度；优点：灵活的 div 高度和间隙大小）：

#page 
  display: flex;
  flex-direction: column;
  align-items: center;


[id^="div-"] 
  border: 1px solid #ccc;
  margin-bottom: 10px;
  width: 50vw;


#div-1 
  height: 50px;
  background: lightgreen;


#div-2 
  height: 70px;
  background: lightyellow;


#div-3 
  height: 150px;
  background: lightcoral;


#div-4 
  height: 100px;
  background: lightblue;


@media (max-width: 1000px) 
  #page 
    flex-wrap: wrap;
    height: 300px;
  
  #small-screen-spacer 
    order: 3;
    align-self: stretch;
    flex: 1 0 100%;
    margin-right: 10px;
  
  #div-1 
    order: 1;
  
  #div-2 
    order: 4;
  
  #div-3 
    order: 5;
  
  #div-4 
    order: 2;
  

<div id="page">
  <div id="div-1">DIV 1</div>
  <div id="div-2">DIV 2</div>
  <div id="div-3">DIV 3</div>
  <div id="div-4">DIV 4</div>
  <div id="small-screen-spacer"> </div>
</div>

#small-screen-spacer 将填充整个可用的垂直空间，以便将所有位于分隔符之后的元素（由 order 属性定义）移动到第二列。此外，您可以通过将垫片上的 margin-right 设置为您想要的值来设置两列之间的所需间隙。

Fiddle

【讨论】：

这看起来像我所追求的，额外的 html 不是问题。有没有办法让#page 的高度不固定，或者可能是最小高度最大高度之类的？我想我也可以使用 vh 等单位，而不是 px。

@Acidon 我很高兴听到这个消息。使用两列布局的具体条件是什么？

媒体查询中的

#page height: 100vh; （或任何你想要的 vh）也应该可以工作。