javascript - 如何分发可变数量的卡片？

Question

我正在尝试创建一个纸牌游戏，比如问答游戏。卡的数量是可配置的(在 1 到 9 之间)。要求之一是卡片必须“居中”。这意味着它们分布在一个中心点周围(但不像一个圆圈)，在父边界和它们自己之间均匀分布，等等。我认为分布的一个想法是

我几乎使用普通元素——只有 Node 和 Webpack，没有框架/库。我想过使用 CSS Grid，但是如果你看到图像，很明显 3x3 网格是行不通的——卡片应该放在 Angular 落里，这意味着卡片离中心太远，而且4 张卡片的“理想”位置将与网格线重叠。我也可以在 JS 中计算每张卡片的位置，但这可能是在重新发明轮子，也许吧？据我所知，可以通过CSS进行计算，所以应该有另一种方法可以不用人工计算。

我尝试过使用网格，但它似乎只能提供如此大的灵 active ——也许使用更精细的网格会有所帮助，但我不知道这是否是最佳选择。

我只需要一些关于如何处理它的想法，或者至少需要正确的搜索词 - 我发现的几乎所有案例都是画廊风格的分布，比如典型的网格。如果你愿意，我可以提供代码，但只要指出正确的方向也会有所帮助。提前致谢。

编辑:损坏的图片链接

Answer 1

如果目标是在您的图像中看到的布局/分布，那么您可以使用 flexbox 并几乎开箱即用，只有带有 4 张卡片 (2x2) 的“板”需要解决方法。因此，对于 2x2，您只需要在创建元素时将额外的类应用到该元素即可。

fiddle :http://jsfiddle.net/2bn3prmq/

* {
    box-sizing: border-box;
}

.board {
    display: flex;
    width: 400px;
    height: 210px;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid;
    flex-wrap: wrap;
    float: left;
}

.board-4 {
   padding: 0px 20px; 
}

.card {
    background: #a20;
    width: 100px; 
    height: 50px;
    flex-shrink: 0;
    margin: 10px;
}

<div class="board">
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board board-4">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>