css - Flexbox + calc() - Flexbox 中可能存在错误？

Question

目标

我正在使用 SASS 开发一个基于 flexbox + calc() 的 grid system with gutters。

您可以像这样通过混合定义网格:

.box {    
    @include column('1/3', $gutter: 20px);
}

编译这将是:

.box {
    width: calc(99.999999% * 1/3 - 13.33333px);
}

问题(请往下阅读更新)

我正在努力寻找一种方法摆脱经典的 .row 容器。

在我看来，使用 flexbox + calc() 应该非常简单，但是我有这个奇怪的错误(或者我的计算中有错误？)当应该创建多行时，它有时会破坏布局.

举个例子:
我想要一个列之间有 20 像素间距的网格。

剩下的最好用代码来解释，所以这里有笔:

http://codepen.io/NilsDannemann/pen/OMBVry?editors=1100

为什么最后一个示例(1/8 - 多行)中断了？

---

更新#1

好吧，这是怎么回事:问题不在于 flexbox space-between 属性，而是来自 flexbox 的一般行为。

Flexbox 始终将排水沟视为可用空间。因此，在最后一个示例中，它将它们合并 (7 * 20px = 140px) 并得出结论，第一行有足够的空间容纳另一个元素(calc() 后的宽度 = 107.5px)。

这就是整个东西掉落的地方。
space-between然后按预期工作。

---

更新#2

我认为解决这个问题的唯一方法是(正如@Siguza 指出的那样)添加边距以填充排水沟。然后使用 :nth-child 选择器将行的最后边距设置为 0。

在 SASS 中，这看起来像这样:

.box {
    @include column('1/8', $gutter: 20px);
    margin-right: 20px;

    &:nth-child(8n) {
        margin-right: 0;
    }
}

现在它变成了 SASS 挑战:
如何从传递的分数中获取 :nth-child(整数)？

经过一些努力，我已经解决了这个问题。 :-)
这是带有当前 SASS 版本网格的笔: http://codepen.io/NilsDannemann/pen/OMaOvX?editors=1100

哇!这很好用!具有完全干净的 DOM 的多列网格!
没有 .row 类或 .eigth 类。随意使用 mixin(更改分数或装订线)。

这里是悲伤的部分:
像这样尝试不均匀网格:

.box1 {
    @include column('2/8', $gutter: 20px);;
}
.box2 {
    @include column('4/8', $gutter: 20px);;
}
.box3 {
    @include column('2/8', $gutter: 20px);;
}

现在 :nth-child 出错了，整个事情都崩溃了。 :-(

如果我们能解决这个问题(无需向混入中引入另一个变量)，我们将拥有迄今为止我所见过的最干净的直观网格之一。但最后一个问题很棘手。

我不确定它是否可以完成。
有没有 SASS 天才可以提供帮助？

Answer 1

问题归结为 justify-content: space-between 的定义。

8.2. Axis Alignment: the justify-content property

The justify-content property aligns flex items along the main axis of the current line of the flex container.

space-between

Flex items are evenly distributed in the line.

_{source: https://www.w3.org/TR/css-flexbox-1/#justify-content-property}

因此，在您的代码中， flex 元素将按照 space-between 的规则对齐，即使它们换行也是如此。

额外的空间将根据行中存在的 flex 元素的数量进行不同的分配。

在说明问题的示例中，第一行有九个 flex 元素，第二行有七个 flex 元素。第二行有更多的额外空间可供分配。因此，排水沟更宽。

该容器中共有 16 个 flex 元素。再添加两个，一切都完美对齐。

Revised Codepen

还有一些注意事项:

• Flexbox 不是为了用作网格系统而构建的。 W3C 正在开发 CSS Grid Layout Module为此目的。

• 不要使用 width 来定义 flex 元素的大小，请考虑使用 flex 属性，这将使您能够控制宽度，以及flex-grow 和 flex-shrink 因素。

• 虽然它似乎没有在 codepen 中引起问题，但使用行注释语法(\\comments ) 在 CSS 中无效，并且有可能破坏您的代码。使用标准的 CSS 注释方法(/* comments */)会更安全。更多详情:https://stackoverflow.com/a/34799134/3597276