Css Flexbox&x2B；calc（）-flexbox中可能存在的错误？ 目标

我正在开发一个基于flexbox+calc（）的网格系统，该系统在SASS中带有排水沟

您可以通过如下方式定义网格：

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

这将是：

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

问题（请进一步阅读更新） 我正试图找到一种摆脱经典的.row容器的方法

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

例如：
我想要一个列之间有20px边沟的网格

其余部分最好用代码解释，所以这里有一支笔：

为什么最后一个示例（1/8-多行）会中断

---

更新#1 好的，这里发生了什么：问题的根源不是flexbox的

属性之间的空格，而是flexbox的一般行为

Flexbox始终将排水沟视为可用空间。因此，在上一个示例中，它将它们组合在一起（7*20px=140px），并得出结论，第一行上有足够的空间容纳另一项（计算后的宽度（）=107.5px）

这是整件事都失败了。

在
之间留出空间，然后按预期工作


更新#2
我认为唯一的解决办法是（正如@Siguza所指出的）增加边距来填充排水沟。然后使用：n子选择器将行的最后边距设置为0

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

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

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

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

现在它变成了一个SASS挑战：

如何从传递的分数中获取第n个子项（整数）

经过一些努力，我已经解决了这个问题。：-）

这是带有当前SASS版本网格的笔：

哇！这太棒了！
具有完全干净DOM的多列网格

无
.row
类或
.eigth
类。您可以随意使用mixin（更改分数或排水沟）

但悲哀的是：

尝试不均匀的网格，如下所示：

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

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

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

现在，第n个孩子错了，整个事情都破裂了-(

如果我们能解决这个问题（不向mixin引入另一个变量），我们将拥有迄今为止我所见过的最干净的直观网格之一。但最后一个问题是一个棘手的问题

我不确定是否能做到。

有什么SASS天才可以帮忙吗？
核心问题似乎是
之间的空间不喜欢多行：


#a
{
显示器：flex；
宽度：190px；
边框：实心1px#999；
柔性包装：包装；
证明内容：之间的空间；
}
#a>分区
{
高度：30px；
宽度：50px；
背景：#EFE；
边框：实心1px#EEE；
}
问题归结为
调整内容的定义：间距


justify content
属性沿主轴对齐弹性项
flex容器的当前行的

之间的空格

弹性项目在生产线上均匀分布

资料来源：

因此，在您的代码中，flex项将按照
之间的
空格规则对齐，即使它们是换行的

额外空间的分配将根据行中存在的弹性项的数量而有所不同

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

该容器中总共有16个flex项。再添加两个，所有项都会完美对齐


还有一些考虑：


Flexbox并不是为了用作网格系统而构建的。W3C正在为此目的开发

< L> > P>而不是<代码>宽度>代码>定义您的Flex项目的大小，考虑使用<代码> Flex >属性，这将使您能够控制宽度，以及<代码> Flex增长和<代码> Flex收缩因素。

虽然在代码笔中似乎没有引起问题，但在CSS中使用行注释语法（
\\comments
）是无效的，可能会破坏您的代码。使用标准CSS注释方法（
/*comments*/
）更安全。详细信息如下：

TL；flexbox博士是被过度炒作的垃圾，这里有一个解决这个无法解决的问题的方法

有没有天才能帮上忙

我不认为自己是“天才”或其他任何东西。我很了解它，但有一个标题。

我被一些人称为“网格大师”，这几乎是我一生中唯一擅长的事情

我已经花了数百个小时与你现在所做的事情斗争。这让我心神不宁。我早上醒来思考这个问题，晚上睡觉思考这个问题。我已经做了很多年了

事实上，整个“Flexbox将拯救网格系统”的meme真的很难过，因为它没有比非Flexbox CSS更有用的功能

作为Michael_B，您最初的问题是您试图使用空格。除非每行上都有非常特定数量的元素，否则这永远不会起作用。期望任何人在每行上都有
x
数量的元素是不实际的


然后你就开始了整个“成吨的标记”（la Bootstrap）与
margin right
网格相比，您似乎选择了
margin right
网格。我也倾向于使用这些网格，因为我关心我的标记是什么样子的。引导网格很快就会变得混乱，我在无数团队中工作过，有一些开发人员加入了这些网格