css - 如何设置 flexbox 容器的 innerText 的 flex 属性？

Question

如果您的 flex box 容器本身有文本(innerText)，那么该文本显然会成为 flex 布局的一部分。但是我如何使用 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>

您只需要想象将正确的值应用到伪元素，以获得所需的结果。