Html Flex布局与ngFor循环不符

我搜索了一下，但找不到一个和我一样的问题。如果有答案，我会道歉

我正在尝试以行格式做一个非常简单的flex布局，其中两个容器并排放置。我有一个卡组件，在另一个组件中有一个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>

卡片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>

这段代码将生成两张叠在一起的卡片，无论我做什么更改，它们都不会以行格式排列

作为测试，我在顶部的cta HTML文件中做了2个div，没有ngFor循环，得到了预期的结果。你知道我做错了什么吗

---

谢谢你的帮助，我真的很感激

所以问题是我的flex代码有一层太深了。最后，我把flex代码放在

app-cta卡上

flex可以按预期工作

以下是堆栈闪电战代码：

---

如果您想要一行，您应该使用

flex direction:row

，这是默认值，因此您可以省略它。您能提供吗stackblitz@zgood这就是我最初做的，它对我的工作没有影响layout@MustafaKunwa我今天到家后就可以这样做了，有没有办法导入文件，还是只需要复制/粘贴？对不起，我从来没用过堆栈闪电战before@MustafaKunwa这里有一个指向stack blitz编辑器的链接，我也尝试过将flex代码放在app.component.css中，但这并没有产生预期的结果。谢谢您提供的所有帮助：）

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

.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);
}