css - Susy 网格中的对齐 block

Question

Susy 是一个很棒的工具，但我觉得我遇到了它的弱点。假设我在“ block ”容器中有三个 float block 元素:

“ block ”元素将被赋予“span(4 of 12)”

<div class="blocks">
    <div class="block">
        //img and text
    </div>
    <div class="block">
        //img and text
    </div>
    <div class="block">
        //img and text
    </div>
</div>

当我展开窗口时， block 内的内容变得对我来说太大了，所以我向“ block ”元素添加了一个最大宽度。当达到最大宽度时，不幸的是，我发现这些 block 靠得太近了……所以我在我的“ block ”元素中添加了一个最大宽度……但这把这个 float 布局搞砸了作为第三个 block 将向右浮动(最后一个)，前两个将向左浮动(导致第二个和第三个元素之间的空间随着调整大小而增加)。

我发现最好的方法是在我的“blocks”容器上设置“text-align: justify”，在我的“block”元素上设置“display: inline-block”。使用这种方法，我可以创建一个布局，其中我的 block 元素在某个点停止增长(“ block ”达到最大宽度)，但随后它们之间的空间继续增加(合理的内容)。

对我来说，这是一个非常好的和有值(value)的布局。我读到过很多人对行内 block 布局和 Susy 的赞美。我想知道 Susy 是否在完成这样的布局方面受到限制。

Answer 1

Susy 没有创建行内 block 布局的快捷方式(因为它们会导致空白问题)——但 Susy 的真正强大之处在于使用提供的函数可以灵活地做任何你想做的事情。你可以这样做:

.block {
  display: inline-block;
  margin: gutter(of 12);
  max-width: 14em; // whatever you need
  width: span(4 of 12);
}

同样的想法也适用于 flexbox，我发现它比 inline-block 更强大——它为您提供了 space-between 选项，这将取代对显式间距或间距的任何需要-覆盖。