Angular 2 Flex布局右对齐图标

Question

我在使用Angular Flex布局对齐项目时遇到麻烦。

下面的片段不将<md-icon>对准标题的右侧，这是我打算执行的操作。

有关如何实现此目标的任何建议？

<div class="flex-item" fxFlex fxFlexAlign="end end">

<md-card style="background-color:white;">
   <md-card-header style="background-color:white;">
      <md-card-title>Swap Card</md-card-title>
      <div class="flex-item" fxFlex fxFlexAlign="end end">
         <md-icon>add_a_photo</md-icon>
         Icon
      </div>
   </md-card-header>
   <md-card-content>
   </md-card-content>
</md-card>

Answer 1

您可以在之间添加一个灵活长度的空跨度：

<md-card>
  <md-card-header>
    <md-card-title>Swap Card</md-card-title>
    <span fxFlex></span>
    <md-icon>add_a_photo</md-icon>
  </md-card-header>
  <md-card-content>
  </md-card-content>
</md-card>

Answer 2

您走在正确的轨道上，只需要添加正确的fxFlexAlign参数。对于您的问题，您将需要。