Question

Susy是一个很棒的工具，但我觉得我已经遇到了它的弱点。假设我在“块”容器中有三个浮动块元素：

“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>

当我展开窗口时，块内的内容对我来说太大了，所以我在“blocks”元素中添加了一个max-width。当达到最大宽度时，不幸的是，我发现块太靠近了...所以我在我的“块”元素中添加了一个最大宽度...但这会将这个浮动布局搞砸为第三个块将向右（最后）浮动，前两个将浮动（通过调整大小增加第二和第三个元素之间的空间）。

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

对我而言，这是一个非常好的和有价值的布局。我读过不同的人对内联块布局和Susy的赞赏。我想知道Susy是否仅限于完成这样的布局。

Answer 1

Susy没有创建内联块布局的快捷方式（因为它们会导致白色空间问题） - 但Susy的真正力量在于使用提供的功能可以灵活地执行任何操作。你可以这样做：

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

同样的想法适用于flexbox，我发现它比内联块更强大 - 它提供了space-between选项，它将取代任何显式装订线或装订线覆盖的需要。

Susy网格中的对齐块

1 个答案: