1

Estou com dificuldade para alinhar os botões em uma tela usando flexbox. Já tentei várias combinações da propriedade fxLayoutAlign mas não consigo o resultado esperado. O que pretendo fazer é alinhar 3 botões da seguinte forma:

Resultado esperado

Esse é o meu trecho de código atual:

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

O que estou fazendo de errado?

1 Resposta 1

1

Aqui tem um exemplo simples, vc tem que colocar margin-right:auto no seu primeiro btn, isso vai fazer ele "empurrar" o restante dos botões para direita do 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>


No seu caso, como vc está usando Bootstrap vc pode dividir em duas colunas sedo que na segunda coluna vc vai usar a classe text-right, isso vai enviar os btns para direita.

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

4
  • Obrigado pela ajuda @hugocsl. Eu estou usando o flex-alyout do Angular github.com/angular/flex-layout. Vou tentar a sua ideia pra ver se resolve. Commented 27/08/2019 às 13:52
  • @ClaudivanMoreira vc tem que ver na documentação qual é o atributo para text-align:right, acho que essa opção vai funcionar para vc melhor do que margin-lft/right:auto no botão.
    – hugocsl
    Commented 27/08/2019 às 13:55
  • Obrigado @hugocsl, funfou! Commented 27/08/2019 às 16:16
  • @ClaudivanMoreira legal que deu certo ai, se resolveu considere marcar a resposta como aceita nesse ícone ✔ abaixo das setinhas de resposta. Depois se aparecer outra resposta que te agrade mais vc pode mudar isso a hora que quiser. Vlw 💪
    – hugocsl
    Commented 27/08/2019 às 16:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .