Objetivos da Aula

Fixar o conteúdo visto nas aulas de flexbox
Fazer um projeto simples, que vai fazer com que a gente tenha algumas visões práticas sobre o flexbox.

Introdução

Fala programador, tudo bem com você? Nessa aula aqui, nós vamos fazer o seguinte layout, bem básico, mas vai fazer a gente fixar várias coisas vistas ao longo do módulo:

Untitled

Definindo o html

Bom, primeiro nós iremos cria a estrutura html, iremos modificar o título, a língua e também iremos linkar o css.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Flexbox exercício</title>
</head>

<body>

</body>

</html>

Agora, nós iremos fazer a criação de um container, que será onde iremos criar as coisas dentro para fazermos as manipulações.
```
<body>
  <div class="container">

  </div>
</body>
```

Dentro do container, nós vamos colocar colocar o header, uma seção para o conteúdo principal e depois o footer.

<body>
  <div class="container">
    <header class="header"></header>
    <section class="mainContent"></section>
    <footer class="footer"></footer>
  </div>
</body>

Bom, para o header e o footer é simples, vamos colocar um parágrafo em cada, colocando o seu nome no parágrafo.

<body>
  <div class="container">
    <header class="header">
      <p class="paragraph">HEADER</p>
    </header>
    <section class="mainContent"></section>
    <footer class="footer">
      <p class="paragraph">FOOTER</p>
    </footer>
  </div>
</body>

Podemos então passar para a seção, na seção, nós iremos colocar os 6 itens, cada um dos itens vai ter um parágrafo, não iremos precisar colocar classes para diferenciar.

<body>
  <div class="container">
    <header class="header">
      <p class="paragraph">HEADER</p>
    </header>
    <section class="mainContent">
      <div class="item">
        <p class="paragraph">Item 1</p>
      </div>
      <div class="item">
        <p class="paragraph">Item 2</p>
      </div>
      <div class="item">
        <p class="paragraph">Item 3</p>
      </div class="item">
      <div class="item">
        <p class="paragraph">Item 4</p>
      </div>
      <div class="item">
        <p class="paragraph">Item 5</p>
      </div>
      <div class="item">
        <p class="paragraph">Item 6</p>
      </div>
    </section>
    <footer class="footer">
      <p class="paragraph">FOOTER</p>
    </footer>
  </div>
</body>

Definindo o css

Agora, partindo par ao css, nós vamos começar removendo a margin e o padding dos elementos, dando também o box-sizing.
```
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
```
Agora, nós vamos manipular o container. Colocaremos o flex, com a direção em coluna, com a sua cor de background e os 100vh padrão.
```
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: darkgray;
}
```
Agora, no header, Nós vamos colocar um flex-basis de 100%, com um background e uma borda.
```
.header {
  flex-basis: 100%;
  background-color: white;
  border: 2px solid black;
}
```

Está mais arrumado agora, nós vamos então centralizar ele horizontalmente, junto com um padding de 10px.

.header {
  flex-basis: 100%;
  background-color: white;
  border: 2px solid black;
  display: flex;
  justify-content: center;
	padding: 10px;
}

Bom, agora vamos para os parágrafos, vamos colocar nos parágrafos uma fonte de 30px.
```
.paragraph {
  font-size: 30px;
}
```
Vamos então para o principal, que é o “main-content”, nele nós iremos definir o flex, colocando o wrap e também centralizando tudo.
```
.mainContent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
```