AnswerBun.com

Problemas ao alinhar div no lado direito

Stack Overflow em Português Asked by IMM Telecom on January 2, 2022

Estou com um problema ao alinhar a div .btns no lado direito do header, já tentei: justify-self: flex-end e end; também já tentei align-self: flex-end, e não consigo com que ela vá para o lado direito. Onde estou a errar?

*{
                margin: 0;
                padding: 0;
            }
            :root{
                --secundaryColor: #50cf80;
                --primaryColor: #7159c1;
                --whiteColor: #FFF;
                --familyText: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                --redColor: red;
                --dark: #333;
            }
            html, body{
                max-height: 100vh;
                max-width: 100vw;
                width: 100%;
                height: 100%;
                background: var(--whiteColor);
                font-family: var(--familyText);
            }
            div.menu{
                display: flex;
                position: fixed;
                flex-direction: row;
                width: 100%;
                padding: 10px;
                background: var(--dark);
            }
            div.logo h1{
                color: var(--primaryColor);
            }
            div.btns{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            div.btns a{
                color: #FFF;
                padding: 10px;
                cursor: pointer;
            }
            .big{
                background: var(--secundaryColor);
                text-decoration: none;
                border-radius: 3px;
            }
        <div class="menu">
            <div class="logo">
                <h1>Net EveryWhere</h1>
                <p>By IMM Telecom</p>
            </div>
            <div class="btns">
                <a href="#">Condições</a>
                <a href="#">Pacotes</a>
                <a href="#" class="big">Iniciar Sessão</a>
            </div>
        </div>

One Answer

Se o flex container esta com flex-direction: row, que é o padrão, vc tem que usar margin para alinhar os elementos filhos no eixo X, então um simples margin-left: auto na div.btns resolve seu problema.

OBS: Outro opção é colocar a propriedade justify-content: space-between; no container PAI, e não margin-left no filho, isso tb vai fazer com que a div.btns fique a direita.

inserir a descrição da imagem aqui

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
}

:root {
  --secundaryColor: #50cf80;
  --primaryColor: #7159c1;
  --whiteColor: #FFF;
  --familyText: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --redColor: red;
  --dark: #333;
}

html,
body {
  max-height: 100vh;
  max-width: 100vw;
  width: 100%;
  height: 100%;
  background: var(--whiteColor);
  font-family: var(--familyText);
}

div.menu {
  display: flex;
  position: fixed;
  flex-direction: row;
  width: 100%;
  padding: 10px;
  background: var(--dark);
}

div.logo h1 {
  color: var(--primaryColor);
}

div.btns {
  display: flex;
  flex-direction: row;
  align-items: center;

  margin-left: auto;
}

div.btns a {
  color: #FFF;
  padding: 10px;
  cursor: pointer;
}

.big {
  background: var(--secundaryColor);
  text-decoration: none;
  border-radius: 3px;
}
<div class="menu">
  <div class="logo">
    <h1>Net EveryWhere</h1>
    <p>By IMM Telecom</p>
  </div>
  <div class="btns">
    <a href="#">Condições</a>
    <a href="#">Pacotes</a>
    <a href="#" class="big">Iniciar Sessão</a>
  </div>
</div>

Answered by hugocsl on January 2, 2022

Add your own answers!

Related Questions

Como desabilitar o required quando o seu input não estiver visível

2  Asked on January 17, 2021 by bruno-henrique

     

Evento onchange do datepicker em HTML5

1  Asked on January 16, 2021 by rodrigo-santos

       

Programa usando malloc duas vezes

3  Asked on January 16, 2021 by gabriel-vinicius

     

Como ocultar informações sensíveis no Django?

3  Asked on January 15, 2021 by vinicius-bussola

         

Flexbox deixa as imagens redimensionadas

1  Asked on January 15, 2021 by niko

   

Posso utilizar um iPhone para testar um app Xamarin?

3  Asked on January 14, 2021 by gustavo-oliveira

         

Alterar posição do elemento com JavaScript

1  Asked on January 13, 2021 by vernica-emschermann

   

Consumir API REST de um endpoint HTTPS com Angular 10 (CORS)

0  Asked on January 13, 2021 by phelipe-chiarelli

         

API REST Consultando outra API

1  Asked on January 13, 2021 by letcia-helena

       

Cliente e Servidor socket com Indy

1  Asked on January 12, 2021 by tonico-bittencourt

     

Como passar uma struct alocada dinamicamente para uma função em C?

1  Asked on January 12, 2021 by larissa-benevides-vieira

         

Como testar exports de um package?

1  Asked on January 11, 2021 by felipe-avelar

   

Somando varios inputs com mesmo id jquery ou javaScript

1  Asked on January 9, 2021 by joao_vitor

     

Solução simples para algoritmo de Fibonacci

6  Asked on January 9, 2021 by joo-laurent

       

“min()” com dois parâmetros

1  Asked on January 8, 2021 by wesley

   

Solr, Lucene e ElasticSearch quais as diferenças? Quando usar um ou outro?

1  Asked on January 7, 2021 by guilherme-de-jesus-santos

       

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir