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属性。根据{{3}}（以及一些经验性的个人经验），attritute align-items和self-align修改交叉轴的处置方式，在您的情况下，column 1}}只要您定义flex-direction: row。

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

flex不会在Angular2材质卡片中对齐我的标题

1 个答案: