Array
(
)

CSS3 Flexbox: Centralizando divs

Joel Rodrigues
|
MVP
Pontos: 1360
    10 jan 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
|
MVP
Pontos: 1360
    10 jan 2017

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:

#Código

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

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


E no CSS ficaria:
#Código
.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;
}