angular - Angular FlexLayout 对齐问题

Question

我正在尝试实现以下布局。所需布局

我想通过最少的 CSS 更改来实现这一点。我相信我犯了一些错误，因为我对 flex-layout 缺乏了解，或者我选择了错误的设计来实现我的目标。我的理解是 child 1 容器应该是一个 column 。但是该列中的每一行都应将其元素对齐为行。所以我可以在“汽车促销：”和“汽车促销ID”之间留一些间距。

子 3 容器的行为方式应与子 1 相同，但它内部有更多标签：值对，我想对这些对进行分组，并在该行中的其他对之间留出一些间距。

任何帮助，将不胜感激

标签： angularflexboxangular-flex-layout

Answer 1

这更接近您想要的布局，但肯定有一些关于您如何尝试布局的问题。尤其是关于您的行，并且您似乎正在尝试在表格中布置零件，即使您正在询问 flex。希望这至少会给你一个更好的起点。

https://stackblitz.com/edit/angular-c422vx?file=src%2Fapp%2Fapp.component.css