带有弹性框的基于列的网格[重复]

Posted 2023-03-05

【中文标题】带有弹性框的基于列的网格[重复]

【英文标题】：Column based grid with flexbox [duplicate]

【发布时间】：2019-01-20 14:16:06

【问题描述】：

这是我的问题： 我有不同的 DIV，它们的宽度都相同，但 高度不同。

在大视口上，这些 DIV 应排列为两列网格。

DIV 之间的ma​​rgin应该相等（垂直和水平）。

由于 DIV 应该以正确的顺序显示在移动设备上的一列中，因此每列不可能有自己的父元素。

这是我想要实现的图像：

有没有办法用纯 html/css 解决这个问题？

到目前为止，我发现的唯一解决方案是使用某种砌体 javascript。但我觉得必须有更好的解决方案......

到目前为止我已经尝试过：

使用浮动/内联块：我得到完美的行，但 4 总是从与 3 相同的高度开始。所以边距不相等。 （见：https://codepen.io/OsmaGiliath/pen/vaPqro）

// EXAMPLE I
.parent 
  width:230px;

.children 
  display:inline-block;
  width:100px;

Flexbox：相同（参见：https://codepen.io/OsmaGiliath/pen/ajMgjR）

// EXAMPLE II
.parent 
  display:flex;
  flex-wrap: wrap;

.children 
  flex:none;

垂直 flexbox：有效——但仅在父元素上使用 固定高度，这在我的示例中是不可能的，因为这会限制元素的增长（请参阅：https://codepen.io/OsmaGiliath/pen/ZjPdVx）

// EXAMPLE III
.parent 
  display:flex;
  flex-wrap: wrap;
  flex-direction:column;

.children 
  flex:none;

【问题讨论】：

看看developer.mozilla.org/en-US/docs/Web/CSS/column-count / 将其与媒体查询相结合以在 1 到 2 列之间进行调整。

最后一种解决方案（垂直弹性盒）是实现您想要的最佳方式。问题是：如何在桌面尺寸上定义父元素的最大高度？您不想要固定高度，但您需要定义元素从哪个点开始换行。

另外：div的数量是总是4个还是动态的？

- 嗯.. 一个固定的最大高度会带来很多新的麻烦，因为它对于所有屏幕尺寸都必须不同，并且必须随着每次内容更新而改变:( - @niemaszoka Jep，它总是 4 div .

【参考方案1】：

如果没有足够的宽度，您可以添加将在一列中翘曲的列。这将允许您在手机上将其显示为一列。请参阅此处的工作示例：https://codepen.io/anon/pen/BPEaXQ。您可以通过更改父“网格”元素的宽度来模拟手机来查看它的工作原理。

<div class="grid">
  <div class="column">
  <div class="element higher">1</div>
  <div class="element">2</div>
  </div>
   <div class="column">
  <div class="element">3</div>
  <div class="element">4</div>
  </div>
</div>


.grid 
 display:flex;
 flex-wrap:wrap;
 flex-direction:row;
 margin:0 auto;
 width:230px;
 border:1px solid blue;  


.column 
  display: flex;
  flex-direction: column;


 .element 
   width:100px;
   height:140px;
   margin:5px;
   background: red;
 

 .higher 
   height:160px;
 

【参考方案2】：

感谢@tobias-k 的评论，我终于找到了解决方案。

对于桌面：

在父元素上使用columnt-count: 2 更改第二个和第三个元素的顺序

对于移动设备：

使用 flexbox 定位列中的元素 使用 flexbox 的 order 交换第二个和第三个元素

https://codepen.io/OsmaGiliath/pen/vaMYPY

感谢您的所有快速回复！