flexbox - flex 不会在 Angular2 材料卡中正确对齐我的标题

Question

我无法通过 CSS 在卡片标题上左右对齐。在我的卡片标题中，我想要md-icon delete_forever右边的。我试过 flex 但没有用。

<div class="flex-container">

   <div *ngFor="let item of items | async" class="flex-items-default">


        <md-card (click)="test()" style="width:300px;height:250px">
              <md-card-header>
                    <md-card-title> 
                        <span>{{ item.name }}</span>
                        <span class="flex2"></span>
                        <span>
                          <button md-icon-button (click)="onDelete()">
                              <md-icon>delete_forever</md-icon>
                          </button>
                        </span>

                    </md-card-title>
                    <md-card-subtitle></md-card-subtitle>
              </md-card-header>
              <md-card-content>
                  {{ item.description }}
              </md-card-content>
        </md-card>

    </div>

</div>


.flex-container {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
}

    .flex2 {
  flex: 1 1 auto;
}

Answer 1

使用 Flex 可能是一种解决方案，但您需要了解如何使用 flex 属性。根据本网站align-items（以及一些经验性的个人经验），self-align在您的情况下，column只要您定义flex-direction: row.

TL;DR：更改flex-direction: row为flex-direction: column然后 css self-align/align-items将允许您在水平轴上对齐。在您的情况下，self-align: flex-end您的按钮包装器应该可以完成这项工作。