如何设置弹性框容器的innerText 的弹性属性？

Question

如果您的弹性框容器本身内部有文本（innerText），那么该文本显然会成为弹性布局的一部分。但是如何通过 flex-basis 和 flex-grow 等设置来控制它呢？有什么办法可以控制吗？

HTML：

<div class="a">
   Sample text
   <div class="b"></div>
   <div class="c"></div>
</div>

CSS：

.a {
  display: flex;
}
.b {
  flex: 0 0 200px;
}
.c {
  flex: 0 0 100px;
}

我想控制“示例文本”的 Flex 属性。

是的，我知道只需将该文本放入它自己的节点中即可解决问题，但我正在处理超过 10k 项的列表，因此我试图将节点数保持在最低限度。

Answer 1

控制文本的想法是考虑环绕文本的两个伪元素，您可以在其中应用 flex 属性并实现您想要的效果：

.a {
  display: flex;
}
.a:before,
.a:after{
  content:"";
  background:pink;
  flex: 1 0 0%;
  
}

.b {
  flex: 1 0 200px;
  background:blue;
  order:2; /*we place them at the end*/
}

.c {
  flex: 0 1 100px;
  background:red; 
  order:2; /*we place them at the end*/
}

<div class="a">
  Sample text
  <div class="b"></div>
  <div class="c"></div>
</div>

您只需想象要应用于伪元素的正确值即可实现所需的结果。