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

Respostas

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 Citar