Eckig 2 Flexlayout Ausrichten Symbol rechts

Question

Ich habe Probleme beim Ausrichten von Elementen mit eckigem Flex-Layout.

Der folgende Snipper richtet nicht das md-Symbol auf der rechten Seite des Headers aus, was ich vorhabe.

Irgendwelche Ratschläge, wie dies zu erreichen ist?

<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 1

Sie könnten eine leere Spanne flexibler Länge 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> 

Answer 2

Sie auf der rechten Spur waren, nur die richtigen fxFlexAlign Parameter hinzuzufügen, benötigt. Für Ihr Problem werden Sie brauchen.

fxLayoutAlign="end start" 

Ich habe es in diesem plunker getestet.

html:

<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 fxLayoutAlign="end start"> 
      <md-icon>add_a_photo</md-icon> 
       Icon 
      </div> 
     </md-card-header> 
    <md-card-content> 
    </md-card-content> 
</md-card> 

Sie können auch lernen, über fxLayoutAlign dieses documentation example verwenden.