Как мне задать свойства flex для innerText контейнера flex box?

Question

Если в вашем контейнере Flex Box есть текст (innerText), то этот текст, очевидно, становится частью макета Flex.Но как мне управлять им с помощью таких параметров, как flex-base и 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 "Sample text".

И да, я знаю, что проблему можно решить, просто поместив этот текст в отдельный узел, но я имею дело со списком + 10 тыс. Элементов, поэтому я пытаюсь сохранить количество узлов наминимум.

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>

Вам просто нужно представить правильные значения, применяемые к псевдоэлементам для достижения необходимого результата.