目标

Question

目标

我正在使用SASS中基于 flexbox + calc（）的网格系统和排水沟。

您可以通过mixins定义网格，如下所示：

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

编译这将是：

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

问题（请进一步阅读更新）

我正试图找到一种方法摆脱经典的.row容器。

在我看来这应该是非常简单的flexbox + calc（）但我有这个奇怪的错误（或我的计算错误？）有时在应该创建多行时打破布局

举个例子：我想要一个在列之间有20px装订线的网格。

其余部分最好在代码中解释，所以这是一支笔：

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错了，整个事情都破了。： - （

如果我们可以解决这个问题（而不向mixin 引入另一个变量），我们将拥有迄今为止最清晰的直观网格之一。但最后一个问题是艰难的。

我不确定它是否可以完成。
任何SASS-Genius都有帮助吗？

Answer 1

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

的定义

8.2. Axis Alignment: the justify-content property

justify-content属性沿主轴对齐弹性项目   Flex容器的当前行。

<强> 空间之间

Flex项目均匀分布在该行中。

<子>源：   https://www.w3.org/TR/css-flexbox-1/#justify-content-property

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

根据线路上存在多少个弹性项目，将分配额外的空间。

在说明问题的示例中，第一行有9个弹性项目，第二行有7个弹性项目。第二行有更多的额外空间来分发。因此，排水沟更宽。

该容器中总共有16个弹性项目。再添加两个，一切都完美对齐。

Revised Codepen

还有一些注意事项：

Flexbox不是用作网格系统的。 W3C正在为此目的开发CSS Grid Layout Module。
使用width属性代替flex定义灵活项的大小，可以使用flex-grow属性来控制宽度，以及flex-shrink和\\ comments因素。
虽然它似乎没有导致codepen出现问题，但使用 行注释语法 （/* comments */）无效在CSS中，有可能破坏你的代码。使用标准CSS评论方法（{{1}}）更安全。更多详情：https://stackoverflow.com/a/34799134/3597276

Answer 2

核心问题似乎是space-between不喜欢多线：

＆＃13;

#a
{
    display: flex;
    width: 190px;
    border: solid 1px #999;
    flex-wrap: wrap;
    justify-content: space-between;
}
#a > div
{
    height: 30px;
    width: 50px;
    background: #EFE;
    border: solid 1px #EEE;
}

＆＃13;

<div id="a">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

＆＃13;

如果第五个方框适合第一行，那么1/4方框也会发生这种情况，如果你的浏览器窗口非常窄，确实会发生这种情况。

但相信这被看作是一个特征而不是一个错误：
Flexbox尝试连续放入尽可能多的项目（但我没有消息来证实这一点。）

我所拥有的是一种解决方法这有点难看，但是您可以.box margin-right 20px .fourth，然后每隔8 .eight一次将其取下:nth-child() .box { background: #eee; text-align: center; padding: 20px; margin-right: 20px; } // Widths: 1/4 .box.fourth { width: calc(100% * 1/4 - (20px - 20px * 1/4)); } .box.fourth:nth-child(4n) { margin-right: 0; } // Widths: 1/8 .box.eigth { width: calc(100% * 1/8 - (20px - 20px * 1/8)); } .box.eigth:nth-child(8n) { margin-right: 0; }使用{{1}}：

等等

{{1}}

[Updated Pen]

Answer 3

TL; DR flexbox被夸大了垃圾，而grid解决了这个无法解决的问题。

任何SASS-Genius都有帮助吗？

您好。我不认为自己是萨斯的天才＆＃34;什么的我知道的很好，但Hugo和few others有这个头衔。

我被称为＆＃34;网格大师＆＃34;少数人它几乎是生活中唯一擅长的东西。

我制作了Jeet和Lost并且花了数百个小时与你现在正在与之战斗的事情进行斗争。它困扰着我。我早上醒来时想着这个问题，晚上睡觉时想着这个问题。我已经做了很多年了。

Flexbox不会让你拯救这个。事实上，整个＆＃34; flexbox将节省网格系统＆＃34;模因是很可悲见证，因为它只是没有按＆＃39;吨必须任何比非Flexbox的CSS更有用的功率

您的原始问题，如Michael_B pointed out，是您尝试使用空格。除非每行都有非常特定数量的元素，否则这将无法工作。期望任何人在每一行上始终拥有x个元素是不切实际的。

然后你转移到整个＆＃34;吨的标记＆＃34; （a la Bootstrap）与margin-right网格相比，您似乎选择了margin-right网格。我倾向于倾向于这些因为我关心我的标记是什么样的。 Bootstrap网格很快就变得混乱了，我已经在无数的团队中工作，其中一些开发人员通过忘记一行或试图嵌套除了一列之外的其他东西来添加一些东西并搞砸了网格。一开始没有人注意到它，但是当你看到整个网站的大部分偏移了15px左右时。重写它可能是一种痛苦。我甚至在ThemeForest上自称为Bootstrap的专家看过几次。

<!-- Bootstrap markup -->
<div class="container">
  <div class="row">
    <div class="col-md-6">1</div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6">1a</div>
        <div class="col-md-6">
          <div class="row">
            <div class="col-md-6">1b</div>
            <div class="col-md-6">2b</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Margin-right grid markup -->
<div class="row">
  <div class="col-6">1</div>
  <div class="col-6">
    <div class="col-6">1a</div>
    <div class="col-6">
      <div class="col-6">1b</div>
      <div class="col-6">2b</div>
    </div>
  </div>
</div>

https://youtu.be/ueZ6tvqhk8U?t=18

margin-right网格的缺点是你需要摆脱行margin-right中的最后一个元素，这可能很棘手，特别是对于预处理器。这可以通过强制用户指定他们想要的最后一个元素来完成，但是当您处理不均匀网格时会引入一系列新问题。

例如，如果我制作一个mixin从每个第3个元素中删除margin-right，但我想在网格中找到各种尺寸和形状的元素，那么我完全搞砸了。我发现缓解这个有点罕见的问题的唯一方法是使用恶心的Bootstrap标记。

这是你回到福祉箱并希望空手而归的地方。

大约一周前，我决定看看Bootstrap / Foundation的人是否对没有在卡片标记处构建的网格感兴趣。他们拒绝了，但我把相当多的工作放在我认为是解决这个问题的最佳方案上。

这里是任意大小的元素，没有额外的标记网格Bootstrap and Foundation shot down：http://codepen.io/corysimmons/pen/MKzPWW?editors=1100

无论如何，如果你喜欢网格，请继续关注下个月初推出的下一个大网格系统（我将在reddit和Hacker News上发送垃圾邮件）。它并没有解决这个特殊的问题，但它将是非常具有革命性的。

如果有人像我一样痴迷于解决这个问题，我很乐意chat和你谈谈这个问题。我确定我没有想到所有事情，而且那里有一些聪明的混蛋只是坐在答案上。

Flexbox + calc（） - flexbox中可能出现的错误？

目标

问题（请进一步阅读更新）

更新＃1

更新＃2

3 个答案: