O Flexbox é uma técnica de posicionamento de elementos HTML que permite criar layouts flexíveis e responsivos. Com o Flexbox, você pode facilmente organizar e alinhar elementos na página, tornando o design mais dinâmico.
Neste artigo, vamos explorar os principais conceitos do Flexbox e fornecer exemplos práticos para ajudar você a entender como utilizá-lo.
Display:flex
Antes de começar a utilizar o Flexbox, é importante definir o contêiner pai como um elemento flexível. Isso é feito definindo a propriedade CSS display com o valor flex no contêiner pai. Veja o exemplo abaixo:
<style>
.container {
display: flex;
}
</style>
<div class="container">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>
Flex-direction
A propriedade flex-direction define a direção do eixo principal do contêiner flexível. Ela pode ter quatro valores possíveis: row, row-reverse, column e column-reverse. O valor padrão é row. Veja os exemplos:
<style>
.container {
display: flex;
flex-direction: row; /* Valor padrão */
}
.container-reverse {
display: flex;
flex-direction: row-reverse;
}
.container-column {
display: flex;
flex-direction: column;
}
.container-column-reverse {
display: flex;
flex-direction: column-reverse;
}
</style>
<div class="container">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>
<div class="container-reverse">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>
<div class="container-column">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>
<div class="container-column-reverse">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>
Justify-content e align-items
As propriedades justify-content e align-items são utilizadas para alinhar os elementos no eixo principal e no eixo transversal, respectivamente. Elas podem receber valores como flex-start, flex-end, center, space-between, space-around e stretch. Veja o exemplo a seguir:
<style>
.container {
display: flex;
justify-content: center; /* Alinhamento horizontal */
align-items: center; /* Alinhamento vertical */
height: 300px;
}
</style>
<div class="container">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>
Flex-wrap e align-content
A propriedade flex-wrap controla a quebra automática dos elementos quando o espaço disponível é insuficiente. Ela pode receber os
valores nowrap, wrap e wrap-reverse. Já a propriedade align-content é usada para alinhar as linhas de elementos em contêineres de várias linhas. Ela aceita os mesmos valores que justify-content. Veja o exemplo abaixo:
<style>
.container {
display: flex;
flex-wrap: wrap; /* Quebra os elementos em várias linhas */
align-content: center; /* Alinha as linhas no centro */
height: 300px;
}
</style>
<div class="container">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
<div>Elemento 4</div>
<div>Elemento 5</div>
<div>Elemento 6</div>
</div>
Flex-grow, flex-shrink e flex-basis
As propriedades flex-grow, flex-shrink e flex-basis são utilizadas para controlar o tamanho e o comportamento de crescimento e encolhimento dos elementos flexíveis. O flex-grow define a proporção em que os elementos devem crescer em relação aos outros elementos. O flex-shrink define a proporção em que eles devem encolher. Já o flex-basis define o tamanho inicial dos elementos. Veja o exemplo abaixo:
<style>
.container {
display: flex;
height: 200px;
}
.item {
flex-grow: 1; /* Todos os itens crescem igualmente */
flex-shrink: 0; /* Os itens não encolhem */
flex-basis: 0; /* Tamanho inicial igual para todos */
}
.item:last-child {
flex-grow: 2; /* O último item cresce em dobro em relação aos outros */
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
Mais exemplos para te ajudar a fixar:
Vamos começar com um exemplo muito simples, resolvendo um problema quase diário: o alinhamento perfeito no centro. Com o flexbox é bem simples:
.pai {
display: flex;
height: 300px; /* ou o valor que você desejar */
}
.filho {
width: 100px; /* ou o valor que você desejar */
height: 100px; /* ou o valor que você desejar */
margin: auto;
}
Definir uma margem como auto fará com que o item fique perfeitamente centrado nos dois eixos.
Agora vamos explorar algumas propriedades extras. Imagine uma lista com 6 itens, cada um com um tamanho fixo, mas que podem se ajustar automaticamente. O objetivo é distribuí-los de forma equilibrada ao longo do eixo horizontal, para que, ao redimensionar a janela do navegador, tudo se adapte perfeitamente sem precisar usar media queries:
.container-flex {
/* Primeiro precisamos criar um layout flexível */
display: flex;
/* Em seguida, definimos a direção do fluxo
e se permitimos que os itens quebrem linha */
flex-flow: row wrap;
/* Por fim definimos como o espaço restante é distribuído */
justify-content: space-around;
}
Prontinho! Aqui você pode ver um exemplo usando esse código no Codepen, o resto do código é apenas estilização.
Vamos fazer diferente agora. Imagine que temos um elemento de navegação alinhado à direita no topo do nosso site, mas queremos que ele esteja centralizado em telas de tamanho médio e em uma única coluna em dispositivos pequenos.
Fazemos algo assim:
/* Telas grandes */
.navegacao {
display: flex;
flex-flow: row wrap;
/* Isso alinha os itens à linha final no eixo principal */
justify-content: flex-end;
}
/* Telas médias */
@media all and (max-width: 800px) {
.navegacao {
/* Em telas de tamanho médio, centralizamos distribuindo igualmente o espaço vazio ao redor dos itens */
justify-content: space-around;
}
}
/* Telas pequenas */
@media all and (max-width: 500px) {
.navegacao {
/* Em telas pequenas, não estamos mais usando a direção de linha, mas sim coluna */
flex-direction: column;
}
}
Aqui você pode ver um exemplo usando esse código no Codepen com o resto dos estilos aplicados.
Podemos brincar mais ainda com a flexibilidade dos itens. Vamos lá?
Faremos um layout de 3 colunas para dispositivos móveis, com cabeçalho e rodapé ocupando toda a largura.
.container {
display: flex;
flex-flow: row wrap;
}
/* Setamos para que todos os itens tenham largura de 100%, usando flex-basis.
O seletor `> *` seleciona todos os elementos filhos diretos do elemento "wrapper". */
.container > * {
flex: 1 100%;
}
/* Dependemos da ordem original para uma abordagem mobile-first
* Sendo assim:
* 1. cabeçalho
* 2. artigo
* 3. sidebar 1
* 4. sidebar 2
* 5. rodapé
*/
/* Telas médias */
@media all and (min-width: 600px) {
/* Setamos que as duas barras laterais compartilhem uma linha */
.sidebar { flex: 1 auto; }
}
/* Telas grandes */
@media all and (min-width: 800px) {
/* Invertemos a ordem da primeira barra lateral e do conteúdo principal e dizemos que o elemento principal deve ocupar o dobro da largura das outras duas barras laterais */
.main { flex: 3 0px; }
.sidebar-1 { order: 1; }
.main { order: 2; }
.sidebar-2 { order: 3; }
.footer { order: 4; }
}
Aqui você pode ver um exemplo usando esse código no Codepen, com o resto dos estilos aplicados.
Espero que este artigo tenha ajudado você a compreender o uso do Flexbox. Com esses exemplos e conceitos, você poderá criar layouts flexíveis e responsivos em suas páginas web.
Experimente e divirta-se explorando as possibilidades do Flexbox e se quiser compartilhar o que fez sinta-se livre. 🙂
Top comments (3)
Muito bom!!!!!
amei!! 💕
demais!! ❤️