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

我无法通过CSS在卡片标题上左右对齐。在我的卡头中，我希望

md图标永远删除\u

位于右侧。我尝试了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;
}

{{item.name}
永远删除你
{{item.description}}
.柔性容器{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
柔性流：行换行；
证明内容：之间的空间；
调整内容：灵活启动；
调整项目：灵活启动；
}
.flex2{
flex:1自动；
}

使用Flex可以是一个解决方案，但您需要了解如何使用Flex属性。根据（以及一些经验个人经验），吸引

对齐项目

和

自对齐

修改横轴上的配置，在您的情况下，只要定义了

弹性方向：行

，即

列

---

TL；DR:将

弹性方向：行

更改为

弹性方向：列

，然后css

自对齐

/

对齐项目

将允许您在水平轴上对齐。在您的情况下，按钮包装上的

self-align:flex-end

应该可以完成这项工作。

对于

flex2

来说，您需要

display:flex

在

上添加display:flex，但它不起作用。好吧，那么还有其他东西阻止它起作用。由于我们看不到渲染结果，长时间使用相关CSS，任何建议都将是基于我们自己的相同图像的猜测，因此如果您可以发布，我们将能够更好地帮助您，一个有用的提示将是给每个项目的背景上色。它经常帮助我了解正在发生的事情，并使我更容易处理它。Web浏览器开发工具也可以做到这一点，尽管我发现颜色更容易，但我已经恢复了@jornsharpe的编辑，请保留它。我们不鼓励过多的闲聊帖子，包括“花花公子”和“到底是怎么回事”——请为Facebook保留这些帖子。