TransWikia.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>
css3html5

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!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP