Question

我有一个特定的用例，我不确定我可以使用什么组件或技术。

包装好的弹性盒中有一组物品：

xxx | xxxxxxxx | xx | xxxxxxxxx |
  x | xxxxxx | xxxxxxxxxxxxxxx | xxx |
  xxxxx | xxxxxxxxxx | XXXX | xxxx
  xxxx | xxxxx | xxxxxxxxx

项目的宽度不同，但高度固定。并且应该将它们包裹起来，以免出现水平溢出。而且总是有一个“活跃”的项目，它具有不同的风格。

现在，flexbox对我来说可以正常工作。这是一个演示：

.wpr {
  width: 150px;
  display:flex;
  flex-flow: row wrap;
  border: 1px solid green;
}
span {
  position: relative;
  display: inline-block;
  padding: 0 2px;
}
span:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1px;
  height: 16px;
  background-color: #111;
}
.special {
  color: green;
}

<div class="wpr">
  <span>xxx</span>
  <span>xxxxxx</span>
  <span>xxx</span>
  <span>xxxxx</span>
  <span>xxx</span>
  <span>xxxxx</span>
  <span class="special">XXX</span>
  <span>xx</span>
  <span>xxxxxxxx</span>
  <span>xx</span>
</div>

但是现在我还要突出显示活动项的完整行。问题是，我不知道哪一行中有哪些项目，因为flexbox可以处理该问题。

例如：

xxx | xxxxxxxx | xx | xxxxxxxxx |
  x | xxxxxx | xxxxxxxxxxxxxxx | xxx |
   xxxxx | xxxxxxxxxx | XXXX | xxxx
  xxxx | xxxxx | xxxxxxxxx

仅查看活动项目在哪一行。

我正在使用React和Flexbox。但我不确定flexbox是否可行。

我可以将每个项目渲染到一个隐藏的DOM元素中以获取其大小并由我自己计算行号，但这很不方便。...

您知道这样做的窍门吗？还是可以使用其他布局系统来做到这一点？

编辑：示例代码：

    <div style={{ display: "flex", flexWrap: "wrap", maxWidth: "960px" }}>
      {this.state.myItems.map((w, i) => (
        <div className={`${i !== this.state.activeIndex ? "playerword" : "playerword-active"}`} style={{ marginTop: "15px", fontSize: "1.3em", cursor: "pointer" }}>
          <div className="olBack" style={{ padding: "3px" }}>
            {w[0]}
          </div>
        </div>
      ))}
    </div>

-亚历山大

具有可样式化行的React / css Flexbox

0 个答案: