html - 是否可以在不改变其旁边元素位置的情况下删除内联元素？

Question

我在一个 flex parent 下有 5 个内联方 block 。单击该按钮时，第一个 方 block 将被删除。每次移除第一个方 block 时，后面的方 block 都会向左推回一个方 block 的宽度(正如预期的那样)。是否有可能让其他方 block 在发生这种情况时保持它们的位置(即它们留在原来的位置而不是向左移动)？

我能想到的一种方法是绝对定位每个方形元素。但这是防止方 block 移动的唯一方法吗？

注意:如果我要删除最后一个方 block ，我希望方 block 保持它们的位置；所以像 justify-content: flex-end 这样的东西不能满足我的需要，因为它对这两种情况都不起作用。

注意 2:visibility: hidden 或 opacity: 0 也无法满足我的需求，因为我确实需要移除正方形元素。我还计划稍后添加另一个方形元素，并且不希望布局发生变化。这可能吗？

请查看 fiddle 示例。

$('.click-me').on('click', function() {
  // Remove the first square.
  $('.main').children().first().remove();
});

.main {
  position: relative;
  display: flex;
  margin-top: 20px;
}
.main span {
  width: 35px;
  height: 35px;
  background-color: #2e852e;
  border: 1px solid #000;
}
.main .square1,
.main .square5 {
  background-color: #a5a551;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click-me">Click Me!</button>
<div class="main">
  <span class="square1"></span>
  <span class="square2"></span>
  <span class="square3"></span>
  <span class="square4"></span>
  <span class="square5"></span>
</div>

Answer 1

已更新:您可以使用网格 方法并将其与使用CSS 变量 相结合。 使用方形元素的索引设置内联样式 CSS 变量，然后在 CSS 中使用它，以在主网格中定位该方形。在这种情况下，您可以删除任何子元素，所有其他子元素将保持其位置。

$('.click-me').on('click', function() {
  // Remove the first square.
  $('.main').children().first().remove();
});

.main {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 35px); /* create grid with 5 columns */
  margin-top: 20px;
}

.square {
  /* make it flex and align it's content */
  display: flex;
  align-items: center;
  justify-content: center;
  /* make it square flexible element */
  width: 100%;
  aspect-ratio: 1/1;
  background-color: #2e852e;
  border: 1px solid #000;
  color: #fff;
  /* using index of element, taken from inline styles, "auto" - callback */
  grid-column-start: var(--sq-index, auto);
}

.square--active {
  background-color: #a5a551;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click-me">Click Me!</button>
<div class="main">
  <span class="square square--active" style="--sq-index: 1;">1</span>
  <span class="square" style="--sq-index: 2;">2</span>
  <span class="square" style="--sq-index: 3;">3</span>
  <span class="square" style="--sq-index: 4;">4</span>
  <span class="square square--active" style="--sq-index: 5;">5</span>
</div>

<div class="main">
  <span class="square" style="--sq-index: 2;">2</span>
  <span class="square" style="--sq-index: 4;">4</span>
  <span class="square square--active" style="--sq-index: 5;">5</span>
</div>

<!-- 
  Example of using "auto" callback.
  Defined index of first child element, 
  all next siblings will be placed automatically
-->
<div class="main">
  <span class="square" style="--sq-index: 3;">3</span>
  <span class="square">4</span>
  <span class="square square--active">5</span>
</div>