Aprenda a utilizar o Flexbox para criar layouts flexíveis
Tags: css, frontend, beginners, tutorial
Published: 2023-06-27 14:42:56

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.


![desenho em gif de garota sentada em uma cadeira com um notebook no colo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n43zq8paq51xl41vzs0.gif)

**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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_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](https://codepen.io/loresgarcia/pen/PoxZaOa) 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](https://codepen.io/loresgarcia/pen/BaGjPPy) 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](https://codepen.io/loresgarcia/pen/VwVeGao) 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. 🙂