仅当有内容时才使 flex-item 尊重宽度

Question

我想创建一个宽度为容器 33% 的 flex-item，仅当存在如下内容时：

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

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

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

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>