Olá, pessoal 👋🏻
Hoje eu vim com uma dica rápida de como centralizar as coisas no CSS usando o Flexbox. Continua aqui comigo que eu já vou te mostrar como funciona esse tal alinhamento.
Iniciando com Flexbox
Nesse exemplo usaremos duas div's. A div mais externa de cor cinza, eu vou chamar de "container" ou "elemento pai", já a div mais interna de cor rosa, eu vou chamar de "box" ou "filho imediato" da div pai.
Dito isso, vamos inicializar o Flexbox inserindo a propriedade "display: flex" no container. Nesse momento, nada mudará visualmente, mas agora todos os filhos imediatos poderão receber os efeitos do Flexbox (No nosso caso, o filho é apenas a box rosa).
Centralizando na horizontal
Agora, ainda no container, vamos adicionar a propriedade "justify-content: center", para alinha a box ao centro horizontal do elemento pai.
Perceba que as propriedades do Flexbox precisam ser obrigatoriamente definidas no elemento pai, e assim os efeitos serão refletidos nos elementos filhos imediatos desse container.
Centralizando na vertical
E o último passo para que a nossa box fique perfeitamente alinhada ao centro do container, usaremos a propriedade "align-items: center;" também no container para centralizar a box na vertical.
Código do projeto
HTML:
<div class="container">
<div class="box">🤙🏻</div>
</div>
CSS:
.container {
border: 3px solid #888;
height: 100px;
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
height: 100px;
width: 100px;
background-color: #fe46a5;
margin: 2px;
padding: 2px 8px;
border-radius: 4px;
font-size: 40px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
Conclusão
O Flexbox facilita demais a nossa vida com as questões de alinhamentos pois, não precisamos mais ficar calculando a distância das bordas do elemento pai até o centro para alinhar o elemento filho. O Flexbox já faz isso automaticamente com apenas 3 definições de propriedades.
Mas fique esperto, essas propriedades de alinhamentos podem ter seus efeitos alterados conforme a definição de direção do Flexbox, pois os alinhamentos são feitos a partir do eixo principal definido por essa direção que por padrão é o "flex-direction: row".
Top comments (0)