Angular CSS：扩展面板并在顶部对齐项目，无论状态如何

Question

我正在用 Angular 编写一些自己的扩展面板。我想模仿 Angular Material Expansion Panel 的行为（这不符合我的要求）。

所以，我基本上有 3 件物品，即

当我单击展开图标时，会显示文本。运行代码在Stackblitz上提供。

当面板折叠时，所有三个图标都在同一水平上

这是由于

    align-items: center;

这看起来很完美。一旦我展开面板，图标也会浮动到容器的中心。有没有办法将它们固定在顶部并在

collapsed

时居中？

Answer 1

我唯一的想法是将所有内容包装在 div 中并使用 Flexbox 进行一些操作。主要变化是将图标和按钮包装到具有硬编码高度的 div 中。不完美，但结果符合预期（只需调整像素）。