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>

您只需要想象正确的值即可应用于伪元素，从而获得所需的结果。

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

1 个答案: