# S1 Linguagem de Programação

## Flex Box

### O módulo de flexbox é projetado como um modelo de layout unidimensional, mas também como uma forma de organizar os elementos na interface espacialmente, além da função de alinhamento avançada. Quando o flexbox é descrito como unidimensional, ele enfatiza o fato de que lida com o layout de uma dimensão por vez - sejam linhas ou colunas. Ele pode ser comparado ao layout de grade de modelo bidimensional do CSS, que pode controlar colunas e linhas ao mesmo tempo.

## Os eixos do flexbox

### Ao usar o flexbox, deve-se lembrar que todas as operações realizadas estão relacionadas a dois eixos: o eixo principal e o eixo horizontal. O eixo principal é definido pela propriedade flex-direction, e o eixo lateral é definido na direção perpendicular à sua direção. Uma vez que esses eixos são as engrenagens básicas do Flexbox, é necessário entender completamente seu funcionamento.

## Eixo principal

### Conforme descrito acima, a propriedade ***flex-direction*** define a direção do eixo principal e pode tem quatro valores possíveis:

* **row**
* **row-reverse**
* ****colum**
* **column-reverse**

### Se o valor escolhido for row (linha) ou row-reverse (linha reversa), seu eixo principal se moverá ao longo da linha — na direção inline.

## Eixo transversal

### O eixo transversal é perpendicular ao eixo principal, logo, se a propriedade flex-direction estiver definida nas linhas, como row ou row-reverse, o eixo transversal estará na direção das colunas, como column ou column-reverse.

### If flex-direction is set to row then the cross axis runs in the block direction.

### Se o eixo principal for definido nas colunas, como column ou column-reverse, então o eixo transversal estará na direção das linhas, como row ou row-reverse

## Contêiner Flex

### A área do documento usando flexbox é chamada contêiner flex para criar esta estrutura, defina o valor do atributo display do elemento representado pelo contêiner como flex ou inline-flex. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo flex. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:
* **Exibição em linha (o padrão do flex-direction é row).**
* **Alinhamento na borda inicial do eixo principal.**
* **Não há expansão no eixo principal, mas pode haver contração.**
* **Haverá expansão vertical para preencher a altura do eixo transversal.**
* **A propriedade flex-basis (en-US) estará definida como auto.**
* **A propriedade flex-wrap estará definida como nowrap.**

## Unidades Relativas de CSS