Question

我有四个柔性盒子，我想关闭它们并让其他人自动调整大小以适应新空的空间。

我认为我的CSS有一些简单的错误，因为目前关闭按钮会关闭每个框。

你能发现我出错的地方吗？

#separator {
  width: 20%;
}
#firstbox {
  width: 20%;
  padding-right: 10px;
  border: 2px solid black;
  padding-left: 10px;
  margin-right: 4px;
  flex-grow: 1;
  flex-shrink: 1;
}
#secondbox {
  width: 20%;
  padding-right: 10px;
  border: 2px solid black;
  padding-left: 10px;
  margin-right: 4px;
  flex-grow: 1;
  flex-shrink: 1;
}
#thirdbox {
  width: 20%;
  padding-right: 10px;
  border: 2px solid black;
  padding-left: 10px;
  margin-right: 4px;
  flex-grow: 1;
  flex-shrink: 1;
}
#fourthbox img {
  width: 30%;
  height: 30%;
  flex-grow: 1;
  flex-shrink: 1;
}

<div class="trancontent">
  <div id="separator">
    <br>
    <hr>
  </div>
  <div id="firstbox">
    <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span>
    <?php include 'test2.php';?>
  </div>
  <div id="secondbox">
    <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span>
    <?php include 'test2.php';?>
  </div>
  <div id="thirdbox">
    <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span>
    <?php include 'test2.php';?>
  </div>
  <div id="fourthbox">
    <img src="greek.jpg" alt="Greek Translation" height="400" width="400">
  </div>
</div>

Answer 1

通过提供弹性项flex-grow: 1，它们每个都会扩展以消耗可用空间。因此，如果删除某个项目，其兄弟姐妹将自动扩展到该新空间。

尝试这种简单的方法：

flex-container {
  display: inline-flex;
  flex-direction: column;
  height: 150px;
}

/* key rule */
flex-container > * { flex: 1; }
/* shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0 */

/* non-essential decorative styles */
#firstbox  { background-color: aqua; }
#secondbox { background-color: pink; }
#thirdbox  { background-color: lightgreen; }
flex-container > * { width: 100px;  border: 1px dashed black; text-align: center; }

<flex-container>
  <div id="firstbox">
    <span id='close' onclick="parentNode.remove()">Close Box #1</span>
    <?php include 'test2.php';?>
  </div>
  <div id="secondbox">
    <span id='close' onclick="parentNode.remove()">Close Box #2</span>
    <?php include 'test2.php';?>
  </div>
  <div id="thirdbox">
    <span id='close' onclick="parentNode.remove()">Close Box #3</span>
    <?php include 'test2.php';?>
  </div>
</flex-container>

当移除兄弟时，使弹性项目自动重新调整大小以填充空间

1 个答案: