javascript - Flexbox vs GSS:如何使未知数量的元素平均分布在其容器中

我一直在玩GridStyleSheets，但是在使容器中未知数量的元素具有相等的宽度，相等的间距并跨越其容器方面遇到困难。我已经可以使用Flexbox实现此目的，但是使用GSS不能达到相同的结果。

我创建了2个CodePens来说明我要执行的操作。希望获得与Flexbox提供的结果相同的结果，但是使用GSS。

CSS / Flexbox-http://codepen.io/davidwickman/pen/BNzxWq

在这里，您可以添加或减去<article>标记的数量，并且元素可以相应地伸缩。

GSS-http://codepen.io/davidwickman/pen/QbErMR

这是我尝试GSS的尝试，但是我无法按预期工作。似乎几乎我需要将容器的宽度除以<article>的计数并将其应用于article[width]。

也许我缺少了一些东西，也许还有更好的方法可以使它在GSS中工作？任何帮助表示赞赏，谢谢！

最佳答案

这将达到目的：

http://codepen.io/d4tocchini/pen/MweXBO

* {
  margin: 0;
  box-sizing: border-box;
}

div {
  @h |(&)| in(::window);
  @v |-(article)-| in(&) gap(20);
  @h |-(article)-...-| in( & ) gap(20) {
    height: == 65;
    width: == :next[width];
  }
}

div的y，高度或宽度没有限制。约束元素的一个好的经验法则是删除边距并添加box-sizing: border-box，并始终确保垂直和水平位置及尺寸受到约束。

实际上，有很多方法可以完成相同的布局。这也将起作用：

* {
  margin:0;
  box-sizing: border-box;
}

@h |(div)| in(::window) {
  gap-size == 20;
  article-width >= 0;
  @h |-(article)-...-| in( & ) gap(gap-size) {
    @v |-(&)-| in(^) gap(gap-size);
    height: == 65;
    width: == article-width;
  }
}

关于javascript - Flexbox vs GSS:如何使未知数量的元素平均分布在其容器中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30312925/