javascript - css 中的动态或自适应类

Question

我有一个问题，我将显示可变数量的显示元素，并且它们将有一个边距设置，该设置在整个集合中统一更新。

所以简单来说，如果我有一个集合是[1,2,3,4,5]，它可能是这样的:

1        2        3        4        5

而如果数字的数量加倍，它们将需要相同数量的空间:

1   2   3   4   5   6   7   8   9   10

我对此有一些解决方案，但令我震惊的是，如果我有一个 css-class(因为给定集合的边距是统一的)我可以共享布局。因此，如果可以动态更新类，我会很高兴，如果这有意义的话，我还没有找到任何可能这样做的信息，所以如果我们假设在第一个示例中，边距类似于 margin-right: 10px; 那么如果我可以更改类，(类似于我在元素上设置 style 的方式，我想这就是我的想法，但对于整个类)，真的很顺利。所以让我们假设一个功能来做到这一点我可以有一个类:

.myclass {
    margin-right: 10px;
}

并通过我们的魔法函数.myclass.setProperty('margin-right', '5px');(或任何语法:P)。它会像我定义了类一样:

.myclass {
    margin-right: 5px;
}

我希望到目前为止，这足以理解我的想法和问题。我现在采用的方法是为所有共享行为使用一个类并为每个元素设置样式。然而，这有点乏味，因为它变成了这样的东西:

for (var i in mynumbers) {
    mynumbers.style.marginRight = new_margin;
}

其中 new_margin 是根据比例计算的(即它可以在短时间内更改多次)。

那么进入问题部分。是否有一种方法可以实现类似于第一部分的东西(一种动态更改类的方法)，或者如果我这样做的方式感觉像个坏主意或者你觉得有更好的方法，那么如何实现它的任何想法或想法处理方法。

感谢阅读，希望您觉得这个问题很有趣。

Answer 1

啊，这只是 flex 布局的另一个典型用例:

.container {
  display: flex;
  border: 1px solid;
  justify-content: space-between;
}

<h2>5 elements in a line with equal width gaps</h2>
<div class="container">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>

<h2>10 elements in a line with equal width gaps</h2>
<div class="container">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
  <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</div>

如果您的浏览器支持该功能，您会看到如下内容:

此处为 browser compatibility .

编辑: 另一个有趣的用例，尽管 OP 没有询问:

.container {
  display: flex;
  border: 1px solid;
  justify-content: space-between;
}
.container:before, .container:after {
  content: '';
  width: 0;
}

<h2>5 elements in a line with equal width gaps</h2>
<div class="container">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>

<h2>10 elements in a line with equal width gaps</h2>
<div class="container">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
  <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</div>

如果您的浏览器支持该功能，您会看到如下内容:

空间不仅在元素之间平分，还包括容器的两端。你可以看到代码是多么简单!