Utilizzando materiale angolare, è possibile allineare un pulsante a sinistra e un altro a destra, nella stessa riga?

Question

Secondo Angular Material's documentation on alignment:

L'attributo layout align prende due parole. La prima parola dice come i bambini saranno allineati nella direzione del layout, e la seconda parola dice come i bambini saranno allineati perpendicolarmente alla direzione del layout .

Ho usato questo per creare la sezione pulsante che si può vedere sulla foto qui sotto:

Con il seguente codice:

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap> 
    <md-button class="md-primary">Submit</md-button> 
    <md-button class="md-warn">Cancel</md-button> 
    <md-button class="md-warn">Delete Boundary Partner Type</md-button> 
</section> 

Tuttavia, ho voluto il Submit pulsante per essere allineato a sinistra e tutti allineati a destra. C'è un modo corretto di farlo con Angular Material o dovrò semplicemente creare i miei stili?

Answer 1

È possibile farlo con l'aiuto di un div e layout-align, ecco il codice:

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap> 
    <div layout="row" layout-align="start center" flex> 
    <md-button class="md-primary">Submit</md-button> 
    <span flex></span> 
    </div> 
    <md-button class="md-warn">Cancel</md-button> 
    <md-button class="md-warn">Delete Boundary Partner Type</md-button> 
</section> 

E un Plunker lavoro.

Answer 2

È inoltre possibile utilizzare

layout-align="space-between center" 

Vai a questa exemple: https://material.angularjs.org/latest/demo/panel (Ultima exemple)

Answer 3

"space-between center" opere con angolare V5 e angolare/flex-layout. Dovrai usarlo come: fxLayoutAlign = "space-between center".