Como usar o Flexbox para criar layouts flexíveis e alinhamentos com facilidade
O Flexbox é um sistema de layout do CSS criado para distribuir e alinhar elementos de forma eficiente, mesmo quando o tamanho deles não é conhecido de antemão.
Para ativá-lo, basta aplicar display: flex no elemento pai, chamado de contêiner. Os filhos diretos passam a ser chamados de itens.
Carregando...Carregando...Com isso, os três itens já ficam lado a lado.
A propriedade flex-direction define o eixo principal.
Carregando...A propriedade justify-content distribui os itens ao longo do eixo principal.
Carregando...A propriedade align-items alinha os itens no eixo perpendicular ao principal.
Carregando...Por padrão, os itens ficam todos em uma linha, comprimindo se necessário. flex-wrap permite que eles quebrem para a linha seguinte.
Carregando...A propriedade flex nos itens controla como eles crescem e encolhem para preencher o espaço disponível.
Carregando...Uma das tarefas mais pedidas no front-end é centralizar um elemento na tela. Com Flexbox, são três linhas:
Carregando...