How to float md-button right within md-list-item

Question

I am having trouble getting my md-button to float to the right of my todo list. I am using angular 4x and flexLayout with the angular material module

My code is as follows:

.list-item {
  width: 100%;
  border-bottom: 1px solid #CCC;
}

.list-item button .material-icons {
  font-size: 16px;
  padding: 0;

}

.list-item:hover button {
  display: block;

}

.list-item button {
  display: block;
  float: right;
  margin: 4px 5px;
  width: 30px;
  height: 30px;
}

.list-item /deep/ .md-checkbox-label {
  margin: 10px 0;
}

<md-list *ngIf="todos.length > 0" class="todo-list">
              <md-list-item *ngFor="let todo of todos" fxLayout="row" class="list-item">
                <md-checkbox (click)="toggleTodoComplete(todo)" 
                color="primary">
                  <span [class.completed]="todo.complete">{{todo.title}} </span>
                </md-checkbox>
                  <button md-mini-fab (click)="removeTodo(todo)">
                    <md-icon>delete_forever</md-icon>
                  </button>
              
              </md-list-item>
          </md-list>

Answer 1

Try adding fxLayoutAlign="space-between center" to your md-list-item, like this:

<md-list-item *ngFor="let todo of todos" fxLayout="row" fxLayoutAlign="space-between center" class="list-item">
       <md-checkbox (click)="toggleTodoComplete(todo)" color="primary">
            <span [class.completed]="todo.complete">{{todo.title}} </span>
       </md-checkbox>
       <button md-mini-fab (click)="removeTodo(todo)">
           <md-icon>delete_forever</md-icon>
       </button>        
</md-list-item>

Also, you might need to remove your existing css for display: block; float: right;