CODEWITHSUNDEEP
cssflexbox
Fredrik_Borgstrom
Fredrik_Borgstrom

Reputation: 3218

How do I set flex properties of the innerText of a flex box container?

If your flex box container itself has text inside it (innerText), then that text apparently becomes part of the flex layout. But how do I control it with settings such as flex-basis and flex-grow? Is there any way to control it?

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;
}

I want to control the flex properties of "Sample text".

And yes, I know the problem would be solved by just putting that text in a node of it's own, but I'm dealing with a list of +10k items so I'm trying to keep the node count at a minimum.

Upvotes: 2

Views: 820

Answers (1)

Temani Afif
Temani Afif

Reputation: 272723

On idea to control the text is to consider both pseudo element that you wrap around the text where you can apply the flex properties and achieve what you want:

.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>

You simply need to imagine the correct values to apply to the pseudo elements in order to achieve the needed result.

Upvotes: 5

Related Questions