html - 删除一项后将 flex 元素保持在原位

Question

我有以下 html:

<div class="grommetux-box grommetux-box--direction-row grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-none grommetux-box--wrap second-header">
    <div class="grommetux-box grommetux-box--direction-row grommetux-box--responsive grommetux-box--pad-none school-info">
        <header class="grommetux-box grommetux-box--direction-row grommetux-box--align-center grommetux-box--pad-horizontal-none grommetux-box--pad-vertical-none grommetux-box--pad-between-small grommetux-header school-name">
            <!-- react-text: 74 --><!-- /react-text -->
        </header>
        <header class="grommetux-box grommetux-box--direction-row grommetux-box--align-center grommetux-box--pad-horizontal-none grommetux-box--pad-vertical-none grommetux-box--pad-between-small grommetux-header grommetux-header--small school-code">
            <!-- react-text: 76 -->School Code: <!-- /react-text -->
        </header>
    </div>
    <div class="grommetux-box grommetux-box--direction-row grommetux-box--responsive grommetux-box--pad-none search-box">

    </div>
</div>

我的 CSS

.grommetux-box {
    display: -ms-flexbox;
    display: flex;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;

}

.grommetux-box--direction-row {
    -ms-flex-direction: row;
    flex-direction: row;
}

.search-box {
    text-decoration: none;
    justify-content: flex-end;
}

.school-info {
    text-indent: inherit;
    flex-direction: inherit;
    justify-content: flex-start;
    display: flex;
}

抱歉，这段代码没有显示完整图片，但基本上我的问题是当我删除第一个内部 div 时，第二个内部 div 取代了它的位置(向左移动)。我如何设计我的 flex，以便在删除一个时不会影响另一个的位置？

Answer 1

如果一个 flex-container 中有多个元素，我们删除一个或多个元素，浏览器将自动重新计算并更新其余元素的位置。

虽然有一种可能性，即我们不从 DOM 中删除元素，而是使用 visibility: hidden 将它们从 View 中隐藏起来。此 css 属性将元素从 View 中隐藏起来，但将它们保留在 DOM 中。因此，具有这种样式的元素将被隐藏，但会保留可见空间。

下面是一个快速演示:

.container {
  min-height: 200px;
  display: flex;
}

.item {
  background: blue;
  margin: 10px;
  width: 15%;
}

.item.hidden {
  visibility: hidden;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item hidden"></div>
  <div class="item"></div>
</div>