Objetivos da Aula

Nós iremos criar um layout onde iremos trabalhar com o que iremos aprender e ao longo das nossas aulas.

Introdução

Fala programador, tudo bem com você? Nessa aula aqui nós vamos estar fazendo a criação de um layout de estudos. Nesse layout nós vamos utilizar ao longo do módulo, para fazermos alguns testes enquanto aprendemos.

Apresentação do layout

Para começar a trabalhar com o flexbox, nós vamos criar um layout simples, que por enquanto vai ter 3 quadrados dentro de um container.
Nós vamos dar uma pequena borda preta a eles. Caso você não consiga criar esse layout, não se preocupe que iremos criar juntos. E mesmo conseguindo, bom você voltar para ver alguns detalhes.

Criação do HTML

Vamos começar criando uma pasta chamada flexbox. Dentro dela, iremos abrir o vscode e iremos criar um arquivo de html e um de css.

Iremos então configurar o html, já linkando com 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 layout</title>
</head>

<body>
</body>

</html>

Em seguida, iremos criar um container para ter os itens.

<!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 layout</title>
</head>

<body>
  <div class="container">
  </div>
</body>

</html>

Nós iremos então colocar os itens dentro desse container. Vamos colocar cada item em uma div, com um parágrafo denominando cada um. Vamos também colocar classes em cada item para manipular eles, nós iremos colocar uma classe para todos.

<!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 layout</title>
</head>

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

</html>

Agora, nós terminamos o nosso html, só iremos precisar manipular agora no css.

Criação do CSS

Agora vamos começar a manipular o css. Primeira coisa que iremos fazer é tirar a margin e o padding de todos os elementos.
```
* {
  margin: 0;
  padding: 0;
}
```
Depois nós vamos colocar uma nova configuração em todos os elementos chamado box sizing. O box sizing é o modo como os itens da nossa página são renderizamos. Nós iremos usar o border-box, pois ele tem algumas propriedades de espaçamento dentro da nossa box, e com isso, a gente vai conseguir ter alinhamentos melhores dentro da página. Aqui no site do MDN você vai conseguir ver melhor isso, vai ver alguns exemplos com e sem o border-box e entender ele sendo usado na prática. ⇒ https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
```
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
```
Agora iremos manipular o nosso container. Nós iremos colocar nele um background e uma altura mínima, para ele preencher toda a tela.
1. Nós colocaremos “100vh”, que significa 100 viewport height, que é a altura da visualização do usuário. Ou seja, se o usuário está no celular, o vh dele é x, se está no pc, provalvemente será de 2x, e essa altura será automáticamente adapatada.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
}
```
Agora com o nosso container ajustado, iremos manipular os itens, começando pelo tamanho.
```
.item {
  width: 200px;
  height: 200px;
}
```

Depois vamos colocar um background e a nossa pequena borda.

.item {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background-color: white;
}

E vamos deixar a nossa fonte maior para ficar melhor de se ler o texto dentro do item.

.item {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background-color: white;
	font-size: 20px;
}