How do you fill the horizontal space in the flexible children line?

direction: row
wrap: nowrap
justify-content: space-around

<div class="flex">
  <div class="child">
    <svg>
  </div>
  <div class="child">
    <svg>
  </div>
  <div class="child">
    <svg>
  </div>
</div>

      

Currently the width of the child divs is determined by the svg size. I would like them to occupy the entire free room in the row, so there are three divs, each of which occupies 33% of the width. Can I do this with flexbox?

+3


source to share


1 answer


You do it simply by setting flex-grow on each flex item, in your case child's, css. Like this:



.child{
    background: lightblue;
    flex-grow: 1;
}

      

+5


source







All Articles