Question 299330 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    Use grid-template-columns: subgrid;:

    .container {
  display: grid;
  grid-template-columns: repeat(var(--columns), 40px);
  justify-content: center;
  gap: 8px;
}

.numbers,
.text {
  display: grid;
  grid-column: span var(--columns);
  grid-template-columns: subgrid;
}

.container span {
  text-align: center;
}

.container span:first-child {
  text-align: left;
}

.container span:last-child {
  text-align: right;
}
    <div class="container" style="--columns: 5;">
  <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 style="grid-column-start: 5;">text2</span>
  </div>
</div>

    If the positions of the .text elements do not match the positions of the .numbers elements, add the corresponding grid-column-start to the .text elements.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search