时间戳

首页 > 解决方案 > Flex 布局未按 ngFor 循环的预期工作

html - Flex 布局未按 ngFor 循环的预期工作

问题描述

我搜索但找不到一个和我很相似的问题。抱歉，如果某处有答案。

我正在尝试以行格式做一个非常简单的 flex 布局，其中 2 个容器并排。我有一个卡片组件，在另一个组件内有一个 ngFor 循环。这是我的代码：

顶-cta-HTML：

<section id="cta-container">
  <h1>Take Control of Your Financial Future</h1>
  <h4>
    Whether you’re looking at annuities to guarantee future income, <br />save
    for a life change, or selling your structured settlement,<br />
    we’re here to help with guidance, advice, and experience
  </h4>
    <app-cta-card></app-cta-card>
</section>

顶部 cta-CSS：

#cta-container {
  margin: 2.5rem 0 0 auto;
  padding: 0 20px 0 5px;
  background-color: orange;
  width: 35%;
  border-bottom-left-radius: 60px;
  text-align: end;
}

#cta-container h1 {
  font-size: 2.75rem;
  font-weight: 900;
}

#cta-container h4 {
  margin-top: -20px;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5em;
}

卡片-HTML：

<article id="card-parent-container">
  <div class="top-cta-card" *ngFor="let card of ctaCards">
    <div class="cta-card-topper">1</div>
    <h3>{{ card.title }}</h3>
    <a href="#" class="top-cta-links">&#10132;</a>
    <p>{{ card.description }}</p>
  </div>
</article>

卡片-CSS：

.top-cta-card {
  background-color: var(--cream);
  width: 300px;
}

#card-parent-container {
  display: flex;
  flex-direction: column;
}

.cta-card-topper {
  background-color: var(--teal);
  height: 100%;
  width: 100%;
  color: var(--teal);
}

.top-cta-links {
  background-color: var(--teal);
  color: var(--cream);
  padding: 5px 6px;
  border-radius: 50%;
  box-shadow: 3px 2px 3px var(--gunMetal50);
}

这段代码产生了 2 张堆叠在一起的卡片，无论我改变什么，它们都不会以行格式放置。

作为测试，我在没有 ngFor 循环的 top-cta-HTML 文件中制作了 2 个 div，并得到了预期的结果。关于我做错了什么的任何想法？

感谢您的任何帮助，我真的很感激！

标签： htmlcssangular

解决方案

所以问题是我的弹性代码太深了一层。我最终将弹性代码放在app-cta-card上面，弹性按预期工作。

这是 Stack Blitz 代码： https ://stackblitz.com/edit/angular-6oxcmy

推荐阅读