Angular 2 Flex Layout Align Icon Right

css angular flexbox angular-material2 angular-flex-layout
TommyK picture TommyK · Jul 24, 2017 · Viewed 13.4k times · Source

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>

Answer

Kim Kern picture Kim Kern · Jul 24, 2017

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>

Related questions

How to use Bootstrap 4 flexbox to fill available content?

I have an angular app that uses bootstrap 4. I have a nav bar that sticks to the top, and I want to add content that fills the remaining space in the browser. Aside from the navbar at the top, I …

Read More
How to center vertically with Angular Flex Layout?

I've created a simple login component and I'd like to vertically center, but I'm not sure how to achieve this using the Angular Flex Layout library. app.component.html <router-outlet></router-outlet> login.component.html <div …

Read More
Angular Material mat-drawer in full height flex, content overflow auto

Yesterday I faced a CSS issue which seems to be related to mat-drawer and Angulars router-outlet. I have got a fullpage flexbox with two children. A mat-toolbar at the top and a custom component app-sidenav at the bottom. This works …

Read More