Question

我想创建一个伸缩项目，仅当存在以下内容时才占用容器宽度的33％：

<FlexItem width='33%'> <Somedom /> </FlexItem>

在这里，FlexItem是一个组件，可以将所有flex属性用作props并呈现div。现在，Somedom可以在dom中呈现空值，在这种情况下，我希望FlexItem完全不占用宽度，并允许同级div填充整个容器。

我想知道是否有任何基于flex的安排可以帮助我实现这一目标。此外，我没有办法知道它是否会渲染内容。我也不想在FlexItem中移动Somedom组件。

Answer 1

使用:empty的@ 04FS建议

您可以做这样简单的事情。

.FlxRw {
  display: flex;
}
.Flx {
  flex:0 0 33%;
  background:#cdf;
}
.Flx:empty {
  flex:0 0 0%;
}

<div class="FlxRw">
  <div class="Flx"></div>
</div>

<div class="FlxRw">
  <div class="Flx">Content</div>
</div>

<div class="FlxRw">
  <div class="Flx"></div>
</div>

仅在有内容的情况下才使flex-item荣誉宽度

1 个答案: