1

Estou tentando fazer uma copia do site https://champion.gg/ utilizando grid/flexbox e gostaria que a caixa de pesquisa champion name ficasse centralizada com a pagina, igual ao site original.

Apliquei um justify-content: space-between pra distribuir as divs mas elas ficam relativas entre elas mesmas, o que pode ser feito?

Site original:

inserir a descrição da imagem aqui E no meu está assim atualmente:

inserir a descrição da imagem aqui

Réplica do código:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    font-family: sans-serif;
}
body {
    background-color: #121617;
    
}
.grid-container {
    display: grid;
    grid-template-areas: 
        'header'
        'midct'
        'footer';
    grid-template-rows: auto auto 80vh 10vh;
    background: #1b2022;
    margin: 0rem 10rem;
    box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(15, 17, 20, 0.8), -12px 0 15px -4px rgba(15, 17, 20, 0.8);
}
/*Começo header*/
.header {
    background-color: #1e2325;
    display: flex;
    flex-direction: column;
}
.parteCima {
    padding-left: 1rem;
    background: 1d2224;
    display: flex;
    justify-content: space-between;
}
.parteBaixo {
    display: flex;
    padding-left: 1rem;
    background-color: #191e1f;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}
.parteBaixo > div {
    
}
/* Search bar */
.search-form {
    display: flex;
    border: none;
    padding: .5rem;
    border-radius: 50%;
    
}
.logo {
    align-self: center;
}
.search-form input[type="text"] {
    padding: .2rem;
    color: #b0b0b0;
    border: 1px solid rgba(145, 145, 145, 0.1);
    background: #1e2325;
}
.search-form button[type="submit"] {
    padding: .5rem;
    border: none;
    background: #89f5a2;
    border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
    border: 1px solid rgba(145, 145, 145, 0.1);

}
.header ul {
    display: flex;
    padding: 1rem 1rem 1rem 0rem;
}
.header li a {
    margin-right: 1rem;
    color: #89f5a2;
    font-weight: 600;
}
.logo img{
    height: 60px;
}
.someNotes {
    color: white;    
}
.someNotes li {
    padding-right: .5rem;
}
.someNotes select {
    background: black;
    color: white;
    border: 1px solid #89f5a2;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <title>baladisGG</title>
</head>
<body>
    <div class="grid-container">
      <div class="header">
         <div class="parteCima">
             <ul>
              <li><a href="">Home</a></li>
              <li><a href="">Statistics</a></li>
              <li><a href="">F.A.Q.</a></li>
          </ul>
          <div class="socialMedia">
              <a href="#"><img src='https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fchampion.gg%2F&ref_src=twsrc%5Etfw&text=Champion.gg%20-%20LoL%20Champion%20Stats%2C%20Guides%2C%20Builds%2C%20Runes%2C%20Masteries%2C%20Counters%20and%20Matchups!&tw_p=tweetbutton&url=https%3A%2F%2Fchampion.gg%2F&via=champion_gg'></a>
              
          </div>
         </div>
         <div class="parteBaixo">
             <div class="logo">
                 <img src="https://champion.gg/img/logo.png">
             </div>
                <div class="searchBox">
                  <form class="search-form">
                  <input type="text" placeholder="Champion name">
                  <button type="submit"><i class="fa fa-search"></i></button>
                  </form> 
                </div>
                <div class="someNotes">
                  <ul>
                      <li>Patch 9.10</li>
                      <li> Champions Analyzed 2,712,160</li>
                      <li>League</li>
                      <li>
                       <select class="select-css">
                        <option>Bronze</option>
                        <option>Prata</option>
                        <option>Ouro</option>
                        <option>Platina</option>
                       </select>    
                      </li>
                  </ul>    
                </div>
         </div> 
      </div>
          
    </div>
</body>
</html>

1 Resposta 1

1

Cara tem alguns detalhai ai. Mas primeiro tenha em mente que o justify-content: space-between; vai distribuir os dentro do pai, mas não vai distribuir igualmente, pois cada filho tem uma largura, e o filho do meio vai ser ajustado no espaço que sobra entre o primeiro filho e o último filho. Então o filho do meio sempre é centralizado no espaço restante do pai descontando a largura do primeiro e último filho.

O seu código esta como a imagem abaixo, filhos de tamanhos diferentes, prova esse "desalinhamento"... e tamanhos iguais fica como vc esperava.

inserir a descrição da imagem aqui

Mas nem tudo está perdido. Vc pode forçar com que todos os filhos de um container flex tenham a mesma medida, para isso vc vai usar flex: 1; nos filhos do container. E vai alinhar o form no centro do filho do meio conforme abaixo.

inserir a descrição da imagem aqui

Segue o código com esses ajustes.

OBS: Precisei diminuir um pouco a fonte dos textos da direita... e Obviamente vc precisa tratar a responsividade disso em telas pequenas tb...

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    font-family: sans-serif;
}
body {
    background-color: #121617;
    
}
.grid-container {
    display: grid;
    grid-template-areas: 
        'header'
        'midct'
        'footer';
    grid-template-rows: auto auto 80vh 10vh;
    background: #1b2022;
    margin: 0rem 10rem;
    box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(15, 17, 20, 0.8), -12px 0 15px -4px rgba(15, 17, 20, 0.8);
}
/*Começo header*/
.header {
    background-color: #1e2325;
    display: flex;
    flex-direction: column;
}
.parteCima {
    padding-left: 1rem;
    background: 1d2224;
    display: flex;
    justify-content: space-between;
}
.parteBaixo {
    display: flex;
    padding-left: 1rem;
    background-color: #191e1f;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}
.parteBaixo > div {
    
}
/* Search bar */
.search-form {
    display: flex;
    border: none;
    padding: .5rem;
    border-radius: 50%;
    
    margin: auto;
}
.logo {
    align-self: center;
}
.search-form input[type="text"] {
    padding: .2rem;
    color: #b0b0b0;
    border: 1px solid rgba(145, 145, 145, 0.1);
    background: #1e2325;
}
.search-form button[type="submit"] {
    padding: .5rem;
    border: none;
    background: #89f5a2;
    border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
    border: 1px solid rgba(145, 145, 145, 0.1);

}
.header ul {
    display: flex;
    padding: 1rem 1rem 1rem 0rem;
}
.header li a {
    margin-right: 1rem;
    color: #89f5a2;
    font-weight: 600;
}
.logo img{
    height: 60px;
}
.someNotes {
    color: white;    
}
.someNotes li {
    padding-right: .5rem;

    font-size: 12px;
    white-space: nowrap;
}
.someNotes select {
    background: black;
    color: white;
    border: 1px solid #89f5a2;
}


.parteBaixo > div {
  flex: 1;
}
.searchBox {
  display: flex;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="grid-container">
  <div class="header">
      <div class="parteCima">
          <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Statistics</a></li>
          <li><a href="">F.A.Q.</a></li>
      </ul>
      <div class="socialMedia">
          <a href="#"><img src='https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fchampion.gg%2F&ref_src=twsrc%5Etfw&text=Champion.gg%20-%20LoL%20Champion%20Stats%2C%20Guides%2C%20Builds%2C%20Runes%2C%20Masteries%2C%20Counters%20and%20Matchups!&tw_p=tweetbutton&url=https%3A%2F%2Fchampion.gg%2F&via=champion_gg'></a>
          
      </div>
      </div>
      <div class="parteBaixo">
          <div class="logo">
              <img src="https://champion.gg/img/logo.png">
          </div>
            <div class="searchBox">
              <form class="search-form">
              <input type="text" placeholder="Champion name">
              <button type="submit"><i class="fa fa-search"></i></button>
              </form> 
            </div>
            <div class="someNotes">
              <ul>
                  <li>Patch 9.10</li>
                  <li> Champions Analyzed 2,712,160</li>
                  <li>League</li>
                  <li>
                    <select class="select-css">
                    <option>Bronze</option>
                    <option>Prata</option>
                    <option>Ouro</option>
                    <option>Platina</option>
                    </select>    
                  </li>
              </ul>    
            </div>
      </div> 
  </div>
      
</div>

2
  • Valeu brother, vou arrumar aqui! 1/06/2019 às 19:46
  • @SamuelBarbosa demoro Flex tem horas que eh meio confuso mesmo
    – hugocsl
    1/06/2019 às 21:53

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 .