Question

我决定使用基础6的新flex网格，我注意到我没有得到预期的行为，因为我得到了块网格。

这是HTML，它与两个实例中使用的代码相同：

<div class="row">
    <div class="small-3 column end text-center red">
        column 1
    </div>
    <div class="small-3 column end text-center green">
        column 2
    </div>
   <div class="small-3 column end text-center green">
        column 3
   </div>
   <div class="small-3 column end text-center green">
       column 4
   </div>

   <div class="small-3 column end text-center green">
       column 5
   </div>
   <div class="small-3 column end text-center green">
       column 6
   </div>
   <div class="small-3 column end text-center green">
       column 7
   </div>
   <div class="small-3 column end text-center green">
       column 8
   </div>

   <div class="small-3 column end text-center green">
       column 9
   </div>
   <div class="small-3 column end text-center green">
       column 10
   </div>
   <div class="small-3 column end text-center green">
       column 11
   </div>
   <div class="small-3 column end text-center green">
       column 12
   </div>
</div>

我尝试使用Flex Grid和Block Grid

我打算在Flex Grid中获得Block Grid链接的结果，是否可能？

我浏览了F6文档，但在那里找不到合适的解决方案（至少从我发现的那个）。

谢谢！

Answer 1

您可以在Foundation的Flex Grid中使用块网格。您必须意识到flex网格完全取代了标准的Foundation Grid。此外，Flex Grid和Block Grid是两个完全不同的东西。 Flex Grid接管整个网格系统（行，列......）。块网格只是一种在多行或单行上分配相同数量的列的方法。

这很可能是您正在寻找的：

https://foundation.zurb.com/sites/docs/flex-grid.html#block-grids

这就是如何在Flex Grid中使用Block Grid。

您还需要确保启用了Flex Grid：

https://foundation.zurb.com/sites/docs/flex-grid.html#importing

基础6如何不包裹弹性网格列？

1 个答案: