flex will not right align my header in an Angular2 material card

Question

I can't get stuff to left and and right align on card headers via CSS. In my card header I want the the md-icon delete_forever to the right. I tried flex but did not work.

<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

Using Flex can be a solution, but you need to understand how to use flex properties. According to this website (and to some empirical personal experience), attritutes align-items and self-align modify disposition on cross-axis which is, in your case, column as long as you defined flex-direction: row.

TL;DR : Change flex-direction: row to flex-direction: column and then css self-align / align-items will allow you to align on horizontal axis. In your case, self-align: flex-end on your button wrapper should do the job.