时间戳

首页 > 解决方案 > 仅当有内容时才使 flex-item 尊重宽度

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

问题描述

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

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

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

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

标签： reactjscssflexbox

解决方案

使用 @04FS 的:empty建议

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

.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>

推荐阅读