How to align flexbox buttons in Angular?

Question

I’m having trouble aligning the buttons on a screen using flexbox. I’ve tried several property combinations fxLayoutAlign but I can’t get the expected result. What I want to do is align 3 buttons as follows:

This is my current code snippet:

<div fxLayout="row">
  <div fxLayoutAlign="start center">
    <meu-botao nome="voltar" (onClique)="voltar()" label="Voltar" icone="keyboard_arrow_left" tipo="button"
      cor="primary"></meu-botao>
  </div>

  <div fxLayoutAlign="end center">
    <meu-botao nome="editar" (onClique)="editar()" *ngIf="showEditButton" label="Editar" icone="edit" tipo="button"
      cor="primary"></meu-botao>

    <meu-botao nome="excluir" (onClique)="deletar()" *ngIf="showDeleteButton" label="Excluir" icone="delete"
      tipo="button" cor="warn"></meu-botao>
  </div>
</div>

What am I doing wrong?

Answer 1

Here is a simple example, you have to put margin-right:auto in his first btn, this will make it "push" the remaining buttons to the right of the container flex.

.container {
    display: flex;
}

button:nth-child(1) {
    margin-right: auto;
}

<div class="container">
    <button>btn1</button>
    <button>btn2</button>
    <button>btn3</button>
</div>

---

In your case, as you are using Bootstrap you can divide into two columns sedo that in the second column you will use the class text-right, this will send the btns right.

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col start center mr-auto">
            <meu-botao nome="voltar" (onclique)="voltar()" label="Voltar" icone="keyboard_arrow_left" tipo="button" cor="primary">btn1</meu-botao>
        </div>

        <div class="col end center text-right">
            <meu-botao nome="editar" (onclique)="editar()" *ngif="showEditButton" label="Editar" icone="edit" tipo="button" cor="primary">btn2</meu-botao>

            <meu-botao nome="excluir" (onclique)="deletar()" *ngif="showDeleteButton" label="Excluir" icone="delete" tipo="button" cor="warn">btn3</meu-botao>
        </div>
    </div>
</div>