Search code examples
cssangularflexboxangular-material2angular-flex-layout

Angular 2 Flex Layout Align Icon Right

I am having trouble aligning items using Angular Flex Layout.

The below snipper doesnt align the <md-icon> to the right of the header which is what I intend it to do.

Any advice on how to accomplish this?

<div class="flex-item" fxFlex fxFlexAlign="end end">

<md-card style="background-color:white;">
   <md-card-header style="background-color:white;">
      <md-card-title>Swap Card</md-card-title>
      <div class="flex-item" fxFlex fxFlexAlign="end end">
         <md-icon>add_a_photo</md-icon>
         Icon
      </div>
   </md-card-header>
   <md-card-content>
   </md-card-content>
</md-card>
Solution

  • You could add an empty span of flexible length in between:

    <md-card>
  <md-card-header>
    <md-card-title>Swap Card</md-card-title>
    <span fxFlex></span>
    <md-icon>add_a_photo</md-icon>
  </md-card-header>
  <md-card-content>
  </md-card-content>
</md-card>