FLEXBOX

O flexbox, vai auxiliar posicionar itens em tela e pra esse projeto vai ser disponibilizado um
HTML e CSS cru e vamos utilizar eles como base. Bem vindo ao projeto alurinha que vai ficar
como mostrado abaixo, além de fazer para mobile.

AULA 1: Arrumando cabeçalho

1° Arrumar o header (cabeçalho) colocando logo do lado esquerdo e conteúdo do lado

direito:

a) Uso display inline block para colocar esses elementos um do lado do outro. Faço isso
no CSS.
 b) Alinhar verticalmente os itens um ao lado do outro ao centro: Midle significa no
centro:

2) Agora vou fazer a mesma distribuição do cabeçalho a cima, porem usando flexbox>
lembrete elemento pai é o bloco principal, e os filhos são os sub blocos.

a) Usar disflex para colocar esses elementos um do lado do outro. Faço isso no CSS.
 Como está no HTML:

 Como devo colocar no CSS colocando o (subgrupo.elemento PAI)

 b) Alinhar verticalmente os itens um ao lado do outro ao centro: Alinhar esses
elementos que estão no container flex no centro:

c) Colocar os itens a esquerda do logo na extremidade: Espaço entre os elementos.

Significa fazer colocar um espaço vazio entre os elementos colocando os dois na
extremidade.

3° Colocar os elementos um do lado do outro, E vendo o HTML e preciso encontrar o pai

desse grupo, nesse caso o bloco onde os sub blocos estão inseridos.

 Como estão os elementos no meu HTML:

  Como vou fazer no CSS para colocar um do lado do outro e referenciar o elemento
pai. E coloco um display flex para esses elementos ficar lado a lado:

1 EXERCICO:

Digamos que temos o seguinte código:

<section class="pai">
<div class="filho">Primeiro filho</div>
<div class="filho">Segundo filho</div>
</section>
Como poderiamos fazer com flex para que os elementos filhos ficassem um
do lado do outro?

Resposta: Colocamos:
.pai {
display: flex;
}
O valor da propriedade display referente ao flexbox é flex.
Ou seja, ficaria display: flex

EXERCICIO 2:

Vimos no primeiro exercício dessa aula que podemos espaçar os elementos

que tem o pai com a propriedade display: flex de forma fácil.

Veja o seguinte problema:

<header class="cabecalho">
<a class="logo" href="#">
<img src="img/logo.png">
</a>

<ul class="menu">
<li class="menu-item">Item 1 do menu</li>
<li class="menu-item">Item 2 do menu</li>
<li class="menu-item">Item 3 do menu</li>
<li class="menu-item">Item 4 do menu</li>
</ul>
</header>

Como podemos fazer com que o menu fique do lado direito e o logo do lado
esquerdo?

Resposta:

Primeiro devemos colocar display: flex no pai, para isso fariamos:

.cabecalho {
display: flex;
}
Agora automaticamente o .logo e o .menu ficam um do lado do outro.

Dessa forma deve sobrar bastante espaço à direita deles. Para alocar todo esse
espaço que está a direita para ficar entre eles devemos colocar a propriedade

justify-content: space-between
No .cabecalho, ou seja, no pai.

O código para isso ficaria assim:

.cabecalho {
display: flex;
justify-content: space-between;
}

EXERCICIO 3:

Bom, até agora conseguimos usar o flexbox para distribuir os elementos um

do lado do outro e separá-los colocando espaço entre eles. A questão é que
esses elementos podem ter alturas diferentes e dessa forma ficarem
desalinhados verticalmente. Veja o seguinte código ( que é o mesmo do
último exercício )
<header class="cabecalho">
<a class="logo" href="#">
<img src="img/logo.png">
</a>

<ul class="menu">
<li class="menu-item">Item 1 do menu</li>
<li class="menu-item">Item 2 do menu</li>
<li class="menu-item">Item 3 do menu</li>
<li class="menu-item">Item 4 do menu</li>
</ul>
</header>

Bom, o css até agora está assim:

.cabecalho {
display: flex;
justify-content: space-between;
}

Tendo em vista tudo isso acima, como podemos alinhar os elementos

(.menu e . logo) verticalmente?
Resposta:
AULA 2: Arrumando o footer (rodapé).

Como está atualmente:

1° Colocar os patrocinadores da alura ao lado do formulário:

 Como está o HTML:

  Como deve ser o CSS. Coloco .contaner por que é nele que está os dois filhos que
quero separar

2° Dividir os espaços entre os patrocinadores e o formulário. Ou seja, colocar um em cada

extremo.
3° Colocar os patrocinadores um do lado do outro. Pego o pai abro parênteses e e coloco no
css as configurações desejadas

4° Alinhar os patrocinadores no centro, ou seja o do lado do outro sem estar um mais alto
que o outro:
5° Colocar a mesma distância em volta dos elementos.

 Primeiro tenho que distribuir o espaço utilizado. Faço isso colocando margin de 5% e
que os patrocinadores ocupam 70% do container, ou seja do espaço.
 Fazer que a parte do formulário ocupe 20% do total:

 Agora coloco no css para que os elementos tenha a mesma distância em volta.
6° Colocar a caixa de imput com a mesma altura do botão enviar.

 Pra isso coloco display flex. Coloco o pai que abrange imput botão.

Aula 3:Arrumando o course map.

Arrumar mapa de curso, como está atualmente:

Quero colocar os cursos um do lado do outro e lista as características de cada curso abaixo.
1° Colocar flexbox para colocar um curso ao lado do outro, porém nesse caso vou ter que que
indicar a direção do flex que eu quero, nesse caso quero que seja em coluna.

2° indicar para o flex pular para a próxima coluna quando extrapola uma media pré
definhada. O Flex-wrap: wrap faz com que se não coube no pai quebra e cria uma nova
coluna. E determino o tamanho de quebra definindo a altura e nesse caso defini que a altura
é de 250px.

Aula 3: Arrumando o course grid

Como está atualmente:

1° Colocar os cursos em grid, ou seja, em caixinhas e lado a lado

 Colocar os itens um do lado do outro.

 Definir um tamanho para os itens, e pra isso coloco o elemento pai.

 Fazer com que ocorra quebra de linha caso atinja o limite máximo de itens na linha
AULA 4: Arrumando os elementos com flex para mobile.

Ele vai ser mobile até a largura de 768px.

Como deve ficar para mobile:

Como está hoje:

1° defino que até 768 px vai ser mobile e usar configuração mencionada abaixo de onde vc
referenciou:

2° Começando pelo cabeçalho, quero que os itens diquem um embaixo do outro:

 Coloco no CSS para que os itens fiquem um embaixo dos outros:

 Fazer com que o logo fica a cima na lista de opções de acesso:

 Tirar a centralização que foi configurado para a versão pc, faço isso colocando o valor
inicial que diz que esta retirando aquela configuração.

 Colocar o texto no centro:

 3° Colocar a lista de cursos um embaixo do outro:

 Coloca a largura máxima de 100%

 Fazer com que os cursos fique um embaixo do outro, faço isso o flex Direction
column que quando não cabe mais na linha joga para linha de baixo.
4° Mexer na parte de mapeamento dos cursos, ou seja, a aqui vamos colocar a listagem e
referencias do curso uma abaixo da outra.

 Fazer com que os itens fiquem um abaixo do outro, preciso tirar a altura que eu
estabeleci quando estava realizando o layout para pc. Vou pedir para calcular
automático.

5° Arrumar menu do rodapé onde fica os patrocionadores.

 Fazer com que os particionadores e o formulário fique um abaixo do outro:

 Alinha os itens no centro, e pra isso preciso tirar a largura que eu defini quando eu
estava configurando a visualização para PC:

 Fazer com que os patrocinadores ocupem 100% do espaço em tela, pra isso preciso
retirar a margem pre estabelecida para ter a visualização para PC.
AULA 5: Mudar as ordens dos nosso itens filhos.

1° Quero que na lista de menu quero que o ultimo item seja o primo a ser exibido para a
minha versão mobile. Pra isso eu coloco que a ordem de apresentação seja de -1, ou seja o
ultimo item seja apresentado primeiro.

AULA 6 : vantagens e o vídeo:

1° Fazer com que as vantagens e os vídeos fiquem um do lado do outro:

2° Alinhar texto das vantagens alurinha:

3° Fazer com que o botão cadastra-se já ocupe 100% da largura. Primero faço que o botão
fique um do lado do outro para pegar o padrão de tamanho, após faço com que um fique
embaixo do outro e sendo assim ele vai ocupar 100% do espaço.

4° Fazer com que o texto das vantagens ocupe o espaço que sobrou na lateral direita.
5° Fazer com que o texto das vantagens juntamente com o botão ocupe o espaço que sobrou
na parte inferior.

6° Distribuir o espaço vazio tbm para o vídeo, fazendo com que ele cresça um pouco: Se
coloco um divio a parte em um mas como pedi pra crescer dois ele divide os espaço vazios.
AULA 7: Responsivo:

1° Quero que quanto mais eu diminuo a tela quero que o o vídeo diminua 2x a mais que o
texto das vantagens: