Блог

Я повторяю элемент n раз (с угловым).

HTML:

 <div class="card d-flex align-items-center; height: 30vh;"
    <div id="bar" *ngFor="let i of Arr(num).fill(1)"></div>
</div>
 

CSS:

 #bar {
    height: 3px;
    width: 35px;
    background-image: linear-gradient(to right, red , green);
}
 

Он работает и повторяет номер бара несколько раз.

Моя проблема в том, что она повторяется, начиная сверху вниз. т. Е. если число равно 5, то под последней полосой и нижней частью карты есть огромный пробел. если число равно 10, то разрыв будет меньше.

Мне нужно, чтобы он был перевернут вверх дном — то есть зазор должен быть выше прутьев, а не ниже, — повторяясь, начиная снизу вверх (или так должно казаться).

Я попытался установить положение div бара в абсолютное и снизу. Я попытался установить родительский div в относительное значение, а также увидел это в другом вопросе. Я изучал трансформацию, но не смог заставить это работать, так как это относительная вещь по осям. Я также пробовал использовать Flex и помещал flex-столбец в родительский, а ms-auto-в дочерний, но это не сработало. Я просто не мог заставить несколько баров двигаться вниз вообще.

Как мне настроить его так, чтобы самая нижняя панель находилась в нижней части родительского элемента?

Вы можете сделать это с помощью гибкой компоновки коробки, используя гибкое направление. Например:

 .container {
  display: flex;
  flex-direction: column-reverse;
} 

 <div class="container">
  <!-- your repeating elements -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div> 

Я не знаю подробностей, но ваши занятия d-flex align-items-center похожи на Бутстрэп(-ишь?) набор инструментов компоновки. (Мой опыт начальной загрузки, вероятно, устарел на пару версий.) Если у этого набора инструментов есть класс для flex-direction: column-reverse , то вы должны просто иметь возможность добавить его в свой контейнер. (Или row-reverse ? Возможно, я делаю предположения о вашем расположении здесь.)