Flex 布局未按 ngFor 循环的预期工作答案

【问题标题】：Flex Layout Not Working as Intended With ngFor LoopFlex 布局未按 ngFor 循环的预期工作
【发布时间】：2020-01-14 02:40:00
【问题描述】：

我进行了搜索，但找不到与我类似的问题。如果某处有答案，我们深表歉意。

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

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

top-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，并得到了预期的结果。关于我做错了什么的任何想法？

感谢您的所有帮助，我真的很感激！

【问题讨论】：

如果你想要一行你应该使用flex-direction: row，这是默认的所以你可以省略它
你能提供stackblitz吗
@zgood 这就是我最初所做的，它对布局没有影响
@MustafaKunwa 我今天回家时可以这样做，有没有办法导入文件还是只需要复制/粘贴？抱歉之前从未使用过 Stack Blitz
@MustafaKunwa 这里是堆栈闪电战编辑器的链接stackblitz.com/edit/angular-yogk3e 我也尝试将 flex 代码放在 app.component.css 中，但这也不会产生预期的结果。谢谢您可以提供的任何和所有帮助:)

标签： html css angular

【解决方案1】：

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

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

【讨论】：