Objetivos da Aula

Entender o que flex container na prática
Entender as principais funcionalidades do flex container
Entender os comportamentos dos itens dentro do container.

Introdução

Fala programador, tudo bem com você? Nessa aula aqui, nós vamos fazer a manipulação do flex-container, essa manipulação vai ser 65% do que veremos do flexbox, pois é aqui que nós temos boa parte da base do flexbox.

Definindo o flex

Nós vamos abrir o arquivo que criamos na aula passada. Nós iremos fazer nossas manipulações no css.
Nós iremos então definir o nosso flex dentro do container, pois é dentro dele que os itens vão ter o comportamento de flex.
```
.container {
	background-color: darkgray;
  min-height: 100vh;
  display: flex;
}
```

Entendendo o direcionamento

O flex agora está definido, e nós temos com o flex, um direcionamento. O direcionamento padrão é como linha, que é o que temos atualmente. Mas nós também podemos colocar como coluna, para manipular de outro modo caso isso seja necessário.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
```
Agora, podemos ver que os itens estão na posição padrão. Isso é útil caso a gente queira usar algumas propriedades do flex sem mudar o posicionamento dos itens.
Nós temos também de direção, fora a direção de linha, a direção de coluna reversa. Isso faz com que o nosso último item fique em primieiro, fazendo também com que o nosso item 1 fique colado na parte de baixo do nosso container.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: flex;
  flex-direction: column-reverse;
}
```
Nós temos também o row-reverse. Que é o reverso da linha que nós temos. Caso você em algum momento queira fazer uma inversão dos itens.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: flex;
  flex-direction: row-reverse;
}
```

Para vermos a próxima propriedade nós iremos deixar como colua normal, pois iremos usar dessa forma.

.container {
  background-color: darkgray;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

Entendendo o gap

Agora nós iremos ver sobre o gap. O gap nada mais é do que espaçamento entre os itens. Ele vai dar o espaçamento que você colocar entre cada item, seja linha ou coluna. Nós vamos começar pelo espaçamento do gap em linha, já que nós temos os itens um abaixo do outro.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
```
Agora, nós podemos ver que os nossos itens tem um espaço entre eles, e como eles estão um abaixo do outro, você consegue ver que cada item pode representar uma linha, da mesma forma quando estão na horizontal, os itens vão representar colunas.
Nós podemos ver também que nós temos espaçamento dos itens, mas estão colados no container, e é assim que deve ser, essa é a ideia do gap.
Nós iremos agora excluir a direção, para os itens ficarem um ao lado do outro, e aí iremos usar o gap de coluna. O gap de coluna vai dar espaço entre os nossos itens de forma horizontal.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: flex;
  column-gap: 15px;
}
```