reactjs - 仅在有内容时才使 flex-item 荣誉宽度

Question

我想创建一个 flex-item，只有当存在如下内容时，它的宽度才占容器的 33%:

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

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

我想知道是否有任何基于 flex 的安排可以帮助我实现这一目标。此外，我没有很好的方法知道它是否会呈现内容。我也不想移动 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>