CSS3 Flexbox: Centralizando divs

10/01/2017

Ol�, pessoal. Tudo bem?

Abri esse t�pico para postarmos exemplos de uso do flexbox das CSS3, semelhante ao que � abordado neste artigo: Como centralizar divs em HTML e CSS.

Voc�s costumam usar em seus projetos no front-end? S�o muitas propriedades e com elas d� pra obter bons resultados.

Abra�o.

Joel Rodrigues

Curtir t�pico + 19

Responder

Post mais votado

12/03/2018

Seguindo a linha de ensino do artigo e somando ao uso de bordas com o CSS podemos fazer telas que lembram a de um smartphone:
HTML:

<div class="container">
    <div class="box">
        <div class="boxContent colorThree">
          <h1 class="colorTextTwo">1</h1>
        </div>
        <div class="boxBottom colorFour">
           <hr class="colorThree" />
        </div>
    </div>
 
    <div class="box">
        <div class="boxContent colorOne">
          <h1 class="colorTextOne">2</h1>
        </div>
        <div class="boxBottom colorTwo">
           <hr class="colorOne" />
        </div>
    </div>
</div>

CSS:

body {margin: 0px;}

.container {
    width: 100vw;
    height: 100vh;
    background: #cbc9c7;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.box {
    width: 375px;
    height: 667px;
    margin: 0px 10px;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 10px;
}

.boxContent {
    width: 100%;
    height: 90%;
    text-align: center;
    border: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.boxContent h1 {
    font-family: sans-serif;
    font-size: 5em;
}

.boxBottom {
    width: 100%;
    height: 10%;
    border: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

 .boxBottom hr {
    width: 20%;
    height: 5px;
    border: none;
    border-radius: 2px;
}

/*COLORS*/
.colorOne {background-color: #be0056}
.colorTwo {background-color: #900035}
.colorThree {background-color: #ff9069}
.colorFour {background-color:#df5042}
.colorTextOne {color:#900035}
.colorTextTwo {color:#df5042}

O objetivo de uso poderia ser apresenta��o de um conte�do comparativo entre dois dispositivos. :)

Higor Rocha

Responder

Gostei + 38

Mais Posts

10/01/2017

Joel Rodrigues

Baseado no exemplo do artigo, vi que podemos alinhar quantas divs forem necess�rias. Basta adicionar novas divs com a classe "box" e adicionar uma margem lateral para separ�-las e facilitar a visualiza��o. Por exemplo, no HTML:

<div class="container">
    <div class="box">
    </div>

    <div class="box">
    </div>
</div>

E no CSS ficaria:

.container {
    width: 100vw;
    height: 100vh;
    background: #6C7A89;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}
.box {
    width: 300px;
    height: 300px;
    margin: 0px 10px;
    background: #fff;
}

Responder

Gostei + 17

25/05/2021

Huann Almeida

Decidi arriscar a fazer algumas adi��es no c�digo.

O HTML ficaria assim:

<div class="container">
  <form class="box">
    <p id="enunciado">Entre com seu login e senha</p>
    <a 
      href="#" 
      class="link" 
      id="cadastro"
    >ou cadastre-se</a>
    <input 
      type="text" 
      name="usuario" 
      placeholder="insira seu usu�rio"
      class="caixa"
    >
    <input 
      type="password" 
      name="senha" 
      placeholder="sua senha"
      class="caixa"
    >
    <input 
      type="submit" 
      value="entrar"
      class="botao"
    >
    <a href="#" 
      class="link"
    >Esqueci a senha</a>
  </form>
</div>

Para o CSS, seria esse c�digo:

  body {
    margin: 0px;
    font-family: Helvetica, sans-serif;
  }
  .container {
    width: 100vw;
    height: 100vh;
    background: #6C7A89;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .box {
    width: 300px;
    height: 300px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }  
  
  p#enunciado{
    text-transform: uppercase;
    font-size: .8rem;
    color: slategray;
    font-weight: bolder;
  }
  .caixa {
    border: 0;
    background-color: rgba(192, 192, 192, 0.342);
    height: 2.5rem;
    width: 50%;
    display: block;
    margin: .4rem;
    text-align: center;
  }
  .caixa:hover{
    background-color: rgba(192, 192, 192, 0.712);
  }
  .botao {
    border: 0;
    border-radius: 1rem;
    display: block;
    height: 2.5rem;
    width: 50%;
    margin: .4rem;
    background-color: lightslategrey;
    color: whitesmoke;
    text-transform: uppercase;
  }
  .botao:hover{
    background-color: rgba(119, 136, 153, 0.589);
  }
  .link{
    text-decoration: none;
    color: rgb(135, 182, 235);
    font-size: .8rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  a:hover{
    color: rgba(255, 99, 71, 0.678);
  }

Responder

Gostei + 13

16/03/2023

Rone

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: rgb(252, 252, 252);
    border-top: 20px solid rgb(33, 199, 194);
    width: 400px;
    height: 300px;
    margin: auto;
    margin-top: 250px;
}
.box {
    display: flex;
    flex-direction: column;
    
}
.titulo, .entrar {
    text-align: center;
    font-family: ''Courier New'', Courier, monospace;
    
}
body {
    margin-top: 20px;
    margin-left: auto;
    margin-bottom: auto;
    background-color: rgb(94, 112, 112);
}
input {
    padding: 10px;
    margin: 3px;
    width: 250px;
    font-family:''Times New Roman'', Times, serif;
    text-align: center;
    background-color: rgb(242, 234, 234);

}
.login, .senha {
    opacity: 60%;
}
#botao {
    padding: 10px;
    width: 270px;
    background-color: aquamarine;
    border: 1px solid rgb(200, 168, 125);
    
}
.entrar p {
    text-align: center;
    line-height: 12px;
    font-size: 12px;
    
}

Responder

Gostei + 1