Angular 2 Flex Layout 右对齐图标

Question

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

下面的截图没有将 <md-icon> 对齐到 header 的右侧，这正是我想要的。

关于如何实现这一点有什么建议吗？

<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 参数即可。对于你的问题，你需要。

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>

您还可以使用此 documentation example 了解 fxLayoutAlign。

Angular 2 Flex Layout 右对齐图标

Angular 2 Flex Layout Align Icon Right

css

angular

flexbox

angular-material2

angular-flex-layout