填充最后一块的空闲空间

Question

我正在尝试在 html/css 中做一个简单的平铺。

当你点击一个方块时，它会消失，它旁边的方块会填满剩余的空间。 问题是剩下的最后一个方块在左边（或右边），只占屏幕的中间。 你能告诉我如何让最后一个剩余的方块填满整个屏幕吗？ （颜色用于工作的清晰度）。

这是代码：

 var el = document.getElementsByClassName("square"); for (var i = 0; i < el.length; i++) { el[i].addEventListener("click", function() { this.remove(); }, true); }

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; } .container { height: 100%; width: 100%; display: flex; flex-flow: column wrap; } .square { flex: 1 1 auto; background-color: gray; border: solid; margin: 1em; }

 <div class="container"> <div style="background: darkred" class="square"></div> <div style="background: darkblue" class="square"></div> </div> <div class="container"> <div style="background: darkgreen" class="square"></div> <div style="background: purple" class="square"></div> </div>

Answer 1

您正在删除彩色框，但它们包含在一个<div class="container"> ，在您单击这些块后，这些框仍然存在。

如果您要移除最后一个盒子，则还必须移除其容器。 然后剩下的盒子也将填充水平空间。

 var el = document.getElementsByClassName("square"); for (var i = 0; i < el.length; i++) { el[i].addEventListener("click", function() { if (this.parentElement.childElementCount === 1) { this.parentElement.remove(); } else { this.remove(); } }, true); }

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; } .container { height: 100%; width: 100%; display: flex; flex-flow: column wrap; } .square { flex: 1 1 auto; background-color: gray; border: solid; margin: 1em; }

 <div class="container"> <div style="background: darkred" class="square"></div> <div style="background: darkblue" class="square"></div> </div> <div class="container"> <div style="background: darkgreen" class="square"></div> <div style="background: purple" class="square"></div> </div>

Answer 2

还剩下两个<div class="container"> ，容器还在，虽然矩形消失了。

您需要检查是否只剩下一个孩子，如果是 - 取出容器。 考虑将您的js代码更改为：

 var el = document.getElementsByClassName("square"); for (var i = 0; i < el.length; i++) { el[i].addEventListener("click", function() { if (this.parentElement.childElementCount === 1) { this.parentElement.remove(); } else { this.remove(); } }, true); }