# Session One: Checkin | Programação
>Autor: Patricia Oliveira Paulino
>Número: 37
>Turma: Info D


## Explicação:

### HTML:

Flex-direction: column; (Ele deixa os elementos em formato de coluna).

flex-direction: row-reverse;(Ele reverte as colunas da direita para a esquerda).

flex-direction: column-reverse;(Ele inverte a coluna de baixo para cima).

flex-wrap: wrap; (Ele quebra a linha verticalmente).

flex-wrap: no-wrap; (Ele não quebra a linha).

flex-wrap: wrap-reverse; (Ele quebra a linha verticalmente e inverte a ordem dos elementos).

justify-content: flex-start; (todos os elementos filhos vai começar do topo da esquerda para direita).

justify-content: flex-end; (todos os elementos vai para a direita).

justify-content: space-around; (o elemento filho e vai ser destribuido dentro do parametro).

justify-content: space-between; (Ela faz espaçamento entre os elementos).

align-items: flex-end; (Vai alinhar de baixo pra cima).

align-items: center; (Ele vai centralizar todos os elementos)

align-items: strech; (Ele vai levar ate o tanto de px).

flex-grow: 0; (Ocupa o resto da largura da div).

flex-shrink: 1; (Encolhe a div).

flex-basis: auto ; (define um width de cada elemento caso não tenha).


## Explicação:

### CSS:
EM: É relativo ao font-size do pai ou da body.
Base font-size * em font-size
* 14px /8 1.2em = 16.8px;
O EM vai mutiplicando os px.

REM: É relativo a font fixada no elemento rot(raiz do documento).
O REM prevalece com o mesmo px.

CH: Baseado na largura do elemento "0".
Exemplo:
width: 10ch; (Quando o texto atingir 10 caracteres de largura ele vai dar uma quebra de linha).

EX: Relativo a altura-x da fonte utilizada(raramente usada) * altura x corresponde a altura da minúscula "x" dessa fonte.
Exemplo:
height: 5ex; (Ele captura a altura do X replicado 5 vezes).

VW e VH: Usa a largura e a altura ao invés do elemento pai.
-VH é igual a 1/100 da altura da viewport.
-Se a altura do navegador é 900px -> 1vh = 9px;
-Se a largura do navegador é 750px -> 1vw = 7.5px;

Exemplo:
.view {
background: pink;
height: 50vh;
width:50vw; (corresponde 50% da largura independente do tamanho que esteja o site).
}

Vmax e Vmin:
Vmax corresponde 1/100 do valor máximo entre a altura e a largura da janela.
Vmin corresponde 1/100 do valor mínimo entre a altura e a largura da janela.

Exemplo:
.view {
background: pink;
height: 350px;
width:50vmax;(Ele movimenta a altura)
}