小编Nat*_*all的帖子

我有一些瓷砖,所有相同,静态宽度和高度在一些容器内.容器的宽度是动态的.瓷砖的数量是动态的.我需要将瓷砖"包裹",以便尽可能多地放在每一行上,但是当瓷砖的数量填满容器的宽度时会创建一个新的行.整行的瓷砖应居中.未填满的一行图块应与整行保持对齐(或者将其定位为完整并居中).见下图.

在此图中,绿色代表容器,黑色代表瓷砖.

我可以通过制作瓷砖inline-block并text-align: center在容器上使用来接近.但是,它出现如下:

这是一个代码示例.我能够对HTML进行必要的更改.

.container {
  border: 5px solid #0f0;
  width: 250px;
  text-align: center;
}

.tile {
  margin: 3px;
  display: inline-block;
  border: 5px solid #000;
  width: 50px;
  height: 40px;
}

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

如果用户传入 type[Iterable<T>]我想返回 type [T]，如果用户传入[Iterable<T>, Iterable<U>]我想返回 type [T, U]。我想对输入数组中的任意数量的元素继续此操作。

有没有一种方法可以通用地定义以下函数的类型，以便它适用于任意数量的输入，而不是继续随着泛型数量的增加而定义函数的重载？

这是我到目前为止所拥有的，但当然它只支持定义的最多 5 个输入。我可以让它适用于任意数量的输入吗？

export function linkIterables<T>(
  iterables: [Iterable<T>],
): Iterable<[T]>;
export function linkIterables<T, U>(
  iterables: [Iterable<T>, Iterable<U>],
): Iterable<[T, U]>;
export function linkIterables<T, U, V>(
  iterables: [Iterable<T>, Iterable<U>, Iterable<V>],
): Iterable<[T, U, V]>;
export function linkIterables<T, U, V, W>(
  iterables: [Iterable<T>, Iterable<U>, Iterable<V>, Iterable<W>],
): Iterable<[T, U, V, W]>;
export function linkIterables<T, U, V, W, X>(
  iterables: [Iterable<T>, Iterable<U>, Iterable<V>, Iterable<W>, Iterable<X>],
): Iterable<[T, U, …