如何在不改变设计的情况下将空元素添加到具有flex样式的元素树中?

Question

我想在css下面添加一个空元素，比如div或span。searchBarDiv关闭在css下面。searchBarButton而不改变外观。目前，如果我这样做，它会将搜索按钮移动到下一行并隐藏css。searchBarInputdiv .

下面是供参考的代码:

<div className={css.searchBarBorder}>
<div className={css.searchBarBase}>
<div className={css.searchBarFirstDiv}>
<label className={css.searchBarLabel} htmlFor="location-search-input">
<div className={css.searchBarFirstDivContent}>
<div className={css.searchBarHeadingFont}>Location</div>
<input
id="location-search-input"
className={css.searchBarInput}
/>
</div>
</label>
</div>
<div className={css.seperator} />
<div className={css.searchBarDiv}>             {/*Enter an empty element below this*/}
<div className={css.datePartStyling}>
<div className={css.searchBarDivContent}>
<div className={css.searchBarHeadingFont}>Date</div>
<div className={css.searchBarInput}>Add when you want to go</div>
</div>
</div>
<div className={css.searchBarButton}>
<a className={css.button}>Search</a>
</div>
</div>
</div>
</div>

CSS:

.searchBarBorder {
position: relative;
width: 100%;
}
.searchBarBase {
display: flex;
flex: 1 1 0%;
height: 100%;
min-width: 0px;
}
.searchBarFirstDiv {
flex: 1 0 0%;
min-width: 0px;
}
.seperator {
align-self: center;
flex: 0 0 0px;
height: 32px;
}
.searchBarDiv {
display: flex;
min-width: 0px;
flex: 0.95 0 auto;
}
.datePartStyling {
flex: 1 0 0% !important;
width: 0px !important;
}
.searchBarButton {
flex: 0 0 auto;
align-self: center;
}

请指导我如何做到这一点。如有任何意见，欢迎回复。

Answer 1

我会尝试给父级100%的宽度。对于3的子元素，你必须给每个子元素33%的宽度，并且在必须有消失元素的子元素中，添加一个额外的div来消失。如果它消失了，也不会破坏任何东西。100%主机箱33%div33%div在你想要某些东西消失的div的33%的地方消失的元素．或者直接添加parent for disappear element