Flexbox基于列的网格

Question

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

• 在大视口上，这些DIV应该布置为具有两列的网格。

• DIV之间的边距应（垂直和水平）相等。

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

以下是我要实现的目标：

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

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

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

• 使用float / inline-block：我得到了完美的行，但是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：有效–但仅在父元素上具有固定高度，在我的示例中是不可能的，因为这会限制元素的增长（请参阅：{{3 }}）

  // EXAMPLE III
  .parent {
    display:flex;
    flex-wrap: wrap;
    flex-direction:column;
  }
  .children {
    flex:none;
  }
  

Answer 1

您可以添加没有足够宽度的列，这些列将在第一列中翘曲。这样您就可以在手机上将其显示为一列。请参见此处的工作示例：https://codepen.io/anon/pen/BPEaXQ。您可以通过更改父级“ grid”元素的宽度来模拟手机来查看其工作情况。

public ActionResult Index()
{
     string url = "https://example.us.com/?t=b&id=100";
     var uri = new Uri(url);
     var domainURL = string.Format("{0}://{1}",uri.Scheme, uri.Host);
     return Redirect(domainURL);
}

Answer 2

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

对于台式机：

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

对于移动设备：

• 使用flexbox将列中的元素定位
• 使用flexbox的order换回第二和第三元素

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

感谢您的所有快速回复！