Angular 2 Flex 布局：将图标对齐到右侧

Question

我在使用 Angular Flex Layout 时遇到了对齐问题。

以下代码段未将 <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>

- TommyK

Answer 1

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

fxLayoutAlign="end start"

我已经在这个plunker中进行了测试。

html:

<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 fxLayoutAlign="end start">
            <md-icon>add_a_photo</md-icon>
              Icon
          </div>
        </md-card-header>
    <md-card-content>
    </md-card-content>
</md-card>

您还可以使用这个文档示例来了解fxLayoutAlign。

- Nehal

---

这是一个更合适的答案。 - Ernesto Alfonso

Answer 2

你可以在中间添加一个长度可变的空span：

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

- Kim Kern