Array
(
)

CSS3 Flexbox: Centralizando divs

Joel Rodrigues
|
MVP
Pontos: 920
    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: 920
    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;
}