Aula 5

Flexbox

É um modelo de layout em CSS projetado para facilitar o design de layouts complexos e a distribuição de espaçamento e alinhamento entre os itens de uma interface, mesmo quando o tamanho dos elementos é desconhecido ou dinâmico.

Utilidade do Flexbox

• Simplifica na distribuição de espaço ao longo de um único eixo ou ambos.
• Facilidade a criação de layouts responsivos.
• Alinhamento vertical e horizontal dos itens torna-se mais simples.
• Permite reorganizar visualmente os itens sem modificar a ordem no código HTML.
• Dimensionamento Dinâmico.
• Facilidade de Uso: Isso torna o desenvolvimento mais eficiente.

Flexbox Model

Para começar a usar o modelo Flexbox, primeiro você precisa definir um flex container.

O elemento a cima representa um flex container(a área em roxo) com três flex items.

Primeiro precisamos de um flex container, ou seja, precisamos de definir a área em que queremos trabalhar.
Fazemos isso, definindo a propriedade display para flex display: flex

O flex container tem dois eixos: o eixo principal e o eixo secundário.

Para colocar os items de acordo o main axis(eixo principal), utilizamos a propriedade justify-content.

Para colocar os items ao longo do cross axis (eixo secundário), utilizamos a propriedade align-items.

flex-direction:

flex-wrap:

Define se os itens devem ser ajustados em uma única linha ou várias linhas no container flexível.

justify-content:

Alinha os itens ao longo do eixo principal do container flexível.

align-itens:

Alinha os itens ao longo do eixo cruzado do container flexível.

Order:

Controla a ordem de exibição dos itens no container flexível.

A propriedade aceita valores inteiros, positivos, negativos ou zero. O valor padrão é 0.

.container {
    display: flex;
}

.item1 {
    order: 2;
}

.item2 {
    order: 1;
}

.item3 {
    /* order não definido então é 0 por default */
}

Flex Box