flexbox - Flex は Angular2 マテリアル カードのヘッダーを正しく配置しません

Question

CSS を介してカード ヘッダーの左右に配置することができません。私のカードヘッダーではmd-icon delete_forever、右側に the が必要です。フレックスを試しましたが、うまくいきませんでした。

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