How to make flex alignment of elements based on the previous flex item

Question

I want to have 'text1' under the number 1 (like the 't' character should be under the 1), and 'text2' under the number 5 (like the '2' character should be under the number 5)

It should be done dynamically, adapting to a different count of numbers. I mean displaying under the first and last corresponding number. I'm using angular and I have the info regarding the count of the numbers in the component. The gap between the numbers is fixed and does not change. In case of too large text then some max width can be set with wrapping to the new line.

I have added an example of how it should work but it should be adapted to the different array of numbers

    .container {
      display: flex;
      flex-direction: column;
      width: 300px;
    }

    .container .numbers {
      display: flex;
      justify-content: center; 
      gap: 10px;
    }

    .container .numbers span {
      width: 30px;
      border: solid;
    }

    .container .text {
      display: flex;
      justify-content: center;
      gap: 144px;
    }
    
    span {
      border: solid;
    }

<div class='container'>
  <div class='numbers'>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
  <div class='text'>
    <span>text1</span>
    <span>text2</span>
  </div>
</div>

Answer 1

I believe you are making something like rating....

Just change justify-content: center; in .container .text and .container .number class to justify-content: space-between;. If the numbers increased then the text1 and text2 will still be justified. You can play around with the widths as well.