Question

我无法使用角度灵活布局来对齐项目。

下面的剪切器没有将标题右侧的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

您处于正确的轨道上，只需添加正确的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。

Answer 2

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

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

Angular 2 Flexlayout右对齐图标

2 个答案: