根据实际数量n为n-children设计样式的通用方法

Question

使用CSS3，完全可以创建如下规则：

.myClass {}

myClass:first-child:nth-last-child(1) {
    width: 100%;
}

myClass:first-child:nth-last-child(5) {
    width: 20%;
}

因此，根据可能子项的数量，我需要指定其他规则，这有点令人敬畏甚至可能，但仍然非常麻烦。

所以我想知道是否有一些花哨的泛型方法，可能涉及css counters和calc()等？

要澄清：我很好奇是否有仅限css 的解决方案。我知道我可以在预处理器甚至（java）脚本的帮助下实现同样的目的。

进一步澄清：而不是必须为每个可能数量的孩子定义规则，我想要创建完全一个（以统治他们所有;）），这取决于根据实际的孩子数量相应地定义宽度。

所以，请说：4 children -> calc(100%/4)，n children -> calc(100%/n)

Answer 1

因此，如果我正确地理解你，你真正想要的是在同一行上平均分配多个元素占据相同的宽度？如果是这样，flexbox可能就是你真正想要的。将容器设置为display: flex;，然后让孩子（在此上下文中为弹性项目）flex: 0 1 auto;（即不要超出内容，根据需要缩小等）。

我设置了一个CodePen来展示一个非常基本的示例：http://codepen.io/frippz/pen/bVReYB