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

如果灵活容器内有多个项目，我们会删除一个或多个项目，浏览器会重新计算并自动更新其余项目的位置。

但是有一种可能性，即不是从DOM中删除项目，而是使用visibility: hidden将它们隐藏在视图中。此css属性隐藏视图中的元素，但将它们保存在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>

删除一个项目后，保持Flex项目到位

1 个答案: