Objetivos da Aula

Entender o que são os flex-items na prática
Entender as funcionalidades dos flex items
Entender as principais manipulações dos flex-items de forma independente.

Introdução

Fala programador, tudo bem com você? Nessa aula nós vamos fazer um exercício de fixação, fazendo um header básico. Eu desafio você a fazer primeiro com tudo que aprendeu até agora, e depois faremos juntos.

Modificando o html

Vamos colocar uma classe extra em todos os itens, pois nós iremos em alguns momentos manipular apenas 1 item.

<body>
  <div class="container">
    <div class="item item1">
      <p>Item 1</p>
    </div>
    <div class="item item2">
      <p>Item 2</p>
    </div>
    <div class="item item3">
      <p>Item 3</p>
    </div>
  </div>
</body>

Entendendo o flex-basis

O flex basis é o tamanho do item. Nós vamos tirar o width e colocar o flex-basis. A diferença entre eles é mínima, nós vamos utilizar o basis por ser algo mais “correto”, acaba sendo uma boa prática utilizar o elemento do flex, já que estamos usando o flex.
```
.item {
  height: 200px;
  border: 2px solid black;
  background-color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 200px;
}
```
Podemos ver que ficou igual, normalmente o nosso flex-basis é usado junto as outras duas funcionalidades que vamos ver logo logo. Podemos também usar % no basis, mas vamos deixar como esta para prosseguir.

Entendendo o flex-grow

O flex-grow é uma forma que temos de aumentar o tamanho dos itens sem fazer com que eles quebrem de forma imediata, nós vamos colocar através de números, colocaremos 1.

.item {
  height: 200px;
  border: 2px solid black;
  background-color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 200px;
  flex-grow: 1;
}

Podemos ver que todos os itens ficaram com o mesmo tamanho, preenchendo todo o espaço disponível que eles tem. A junção dele e do flex-basis é importante para ativar o wrap. Nós colocando aqui em inspecionar e diminuindo a tela, vemos que quando chegar o item em 200px, eles vão quebrar e vai descer, sem o basis, isso não acontece.
Nós também podemos fazer o aumento de um item de forma individual usando o flex-grow.
```
.item1{
  flex-grow: 2;
}
```
Conseguimos ver que o item 1 agora está muito maior que os outros, fizemos com, que de forma individual, ele crescece. Nós vamos deixar assim para prosseguir.

Entendendo o flex-shrink

O flex-shrink está ligado agora a diminuição dos nosso itens. Nós vamos usar no item 1 esse shrink, o valor padrão dele é 1, vamos colocar 2, isso vai fazer com que ele diminuia primeiro em relação aos outros 2 quando chegar no limite do basis. Vamos desativar o “wrap” para conseguir ver isso acontecendo de fato.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
}
.item1 {
  flex-shrink: 2;
}
```
Podemos ver que quando diminuímos, em um certo momento, o item 1 começa a diminuir mais do que os outros e em “364px” ele fica bem menor que os outros.
Agora, acontece o inverso caso a gente coloque 0 nesse nosso shrink. Isso vai fazer que ele não diminua quando chegar em 200px, que é o nosso basis.
```
.item1 {
  flex-shrink: 0;
}
```