CSS3 Flexbox: Centralizando divs

10/01/2017

98

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

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

12/03/2018

Higor Rocha

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. :)
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar