Html 删除一个项目后，保留弹性项目

我有以下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>

---

很抱歉，这段代码没有显示整个画面，但基本上我的问题是，当我删除第一个内部div时，第二个内部div替换了它（向左移动）。如何设计我的flex，以便在删除其中一项时不会影响另一项的位置？

如果flex容器中有多个项目，并且我们删除了一个或多个项目，浏览器将自动重新计算并更新其余项目的位置

但是有一种可能性，即我们不从DOM中删除项目，而是使用

可见性：hidden

从视图中隐藏它们。此css属性隐藏视图中的元素，但将它们保留在DOM中。因此，具有这种样式的元素将被隐藏，但保持空间在视图中

下面的代码片段中有一个快速演示：

.container{
最小高度：200px；
显示器：flex；
}
.项目{
背景：蓝色；
利润率：10px；
宽度：15%；
}
.item.hidden{
可见性：隐藏；
}

如果要移除物品，则会更新剩余物品的位置。您可以尝试

可见性：隐藏
，而不是删除项目。这样，它们就不会出现在屏幕上，项目的位置也将保持不变。哇，好提示。请写下答案以便我能接受。但有一个问题是，是否有人可以在chrome inspector上更改css选择器？如果我不想让某些用户看到某个组件，这会是一个安全问题吗？因为这只是一个建议，所以我认为将其作为答案发布不是一个好主意，因为可能还有其他更好的想法。如果安全性是一个问题，您可以只使用flex项中的内容，并将父项保留在DOM中（但为此，您需要为所有项指定宽度）。不客气，我已经发布了一个答案，并给出了简要说明。
.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;
}