Question

我需要一些帮助来设置基于列的网格以实现灵活布局。我希望主要使用flexbox，但一直无法弄清楚如何实现我所需要的。我也愿意使用JS网格插件，但又没有找到满足我特定需求的插件。

这张照片展示了我希望构建的内容。 Grid Illustration

最重要的优先事项是：

布局在主内容容器中创建尽可能多的列。
在列中组织内容块后，调整每个内容块的大小，使每个列的高度均匀。
主要内容容器的高度尺度符合其中的内容。
最好按顺序显示元素，但不是强制性的。

我还希望内容容器的宽度可以根据设备进行扩展。因此可以预见，当它转向移动时，它就变成了一个简单的一列布局。

现在我相信我可以通过设置容器宽度和内容块宽度来控制网格数量，具体取决于设备。即如果它在移动设备上，则内容块的宽度为100％，如果它在桌面上，则容器为900px，内容块为300px。

加上flexbox应该给我一些类似于此的东西。 Flexbox Illustration，但前提是我在主容器上设置固定高度，这是不理想的。

所以我的问题是，有没有办法设置flexbox来实现我的目标？如果，是不是有JS插件能够做到这一点？

HTML

<div id="blocks">
  <div class="block">
    <div class="info" style="height:280px"></div>
  </div>
  <div class="block">
    <div class="info" style="height:280px"></div>
  </div>
  <div class="block">
    <div class="info" style="height:280px"></div>
  </div>
  <div class="block">
    <div class="info" style="height:600px"></div>
  </div>
  <div class="block">
    <div class="info" style="height:400px"></div>
  </div>
  <div class="block">
    <div class="info" style="height:300px"></div>
  </div>
</div>

CSS

#blocks{
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items:flex-start;
    flex-wrap:wrap;         

    background-color: #ddd;
    width:900px;
    height:900px;
}
.info{
    position:relative;
    width:80%;
    background-color: #888;
    margin: 5px 0px;
}
.block{
    width:290px;
    background-color: #ddd;
    border: 1px solid black;
    flex: 1 0 auto;

    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
}

CodePen

具有适合高度块的Flexbox柱网格

0 个答案: