代码之家 › 专栏 › 技术社区 › aerojas

如何分配可变数量的卡?

css html javascript

aerojas · 技术社区 · 6 年前

我正在尝试创建一个纸牌游戏,就像一个琐事。卡的数量是可配置的(1到9之间)。其中一个要求是卡片必须“居中”。这意味着它们分布在一个中心点周围(但不象一个圆),在父边界和它们自己之间均匀分布,等等。

我使用的几乎是普通的元素——只是节点和Webpack,没有框架/库。我曾经想过使用CSS网格,但是如果你看到图片,很明显3x3网格不起作用-卡片应该放在角落里,这意味着卡片会离中心太远,4张卡片的“理想”位置会重叠网格线。我也可以在JS中计算每张卡的位置,但这可能会重新设计轮子?据我所知,计算可以通过CSS执行,因此应该有另一种方法不需要手动计算。

我试过使用网格,但它似乎只能提供这么多的灵活性——也许使用更精细的网格会有所帮助,但我不知道它是否是最佳选择。

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

编辑:断开的图像链接

2 回复 | 直到 6 年前

Mathias W 6 年前

如果目标是在你的图像中看到的布局/分布,那么你可以使用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>

lorenzw 6 年前

引导程序的网格应该可以正常工作。您甚至不需要定义固定行,只需编写

<div class="row justify-content-center>
<div id="card1" class="col-4"></div>
//As many cards as you want
</div>

因为引导网格依赖于flexbox(我认为),所以您应该能够使用本机CSS构建类似的行为。