在最后一个块中填写 free space

Question

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

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

代码如下：

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"> 中，在您点击方块后它们仍然存在。

如果您要移除最后一个盒子，则还必须移除它的容器。那么剩下的框也将水平填充space.

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">，虽然矩形消失了，但容器仍然存在。

您需要检查是否只剩下一个 children，如果是 - 移除容器。考虑将您的 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);
}

在最后一个块中填写 free space

Fill in the free space in the last block

html

css

tiling