Aprenda a utilizar o Flexbox para criar layouts flexíveis

#css #frontend #beginners #tutorial

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. 🙂