Angular FlexLayout 对齐问题
Angular FlexLayout alignment issue
我正在尝试实现以下布局。 layout desired
我希望通过最少的 css 更改来实现此目的。我相信我犯了一些错误，因为我对 flex-layout 缺乏理解，或者我选择了错误的设计来实现我的目标。
我的理解是 child 1 container 应该是一个 column 。但是该列中的每一行都应将其元素对齐为行。所以我可以在 "Car Sales Promotion : " 和 "Car Sale Promotion Id" 之间留一些间距。
子 3 容器的行为方式应与子 1 相同，但它内部有更多 label:value 对，我想对这些对进行分组，并在该行的其他对之间留出一些间距。
如有任何帮助，我们将不胜感激
这更接近您想要的布局，但肯定存在一些关于您尝试如何布局的问题。特别是关于您的行，即使您在询问 flex，您似乎也在尝试将零件布置在 table 中。希望这至少能给你一个更好的起点。
https://stackblitz.com/edit/angular-c422vx?file=src%2Fapp%2Fapp.component.css
我正在尝试实现以下布局。 layout desired
我希望通过最少的 css 更改来实现此目的。我相信我犯了一些错误，因为我对 flex-layout 缺乏理解，或者我选择了错误的设计来实现我的目标。 我的理解是 child 1 container 应该是一个 column 。但是该列中的每一行都应将其元素对齐为行。所以我可以在 "Car Sales Promotion : " 和 "Car Sale Promotion Id" 之间留一些间距。
子 3 容器的行为方式应与子 1 相同，但它内部有更多 label:value 对，我想对这些对进行分组，并在该行的其他对之间留出一些间距。
如有任何帮助，我们将不胜感激
这更接近您想要的布局，但肯定存在一些关于您尝试如何布局的问题。特别是关于您的行，即使您在询问 flex，您似乎也在尝试将零件布置在 table 中。希望这至少能给你一个更好的起点。
https://stackblitz.com/edit/angular-c422vx?file=src%2Fapp%2Fapp.component.css