Aula 14: Flexbox – A maneira moderna de alinhar e distribuir espaço

Ei! Pronto para mergulhar em uma das ferramentas mais legais e poderosas do CSS? Hoje vamos explorar o Flexbox. Se você já teve dificuldade em alinhar itens ou distribuir espaço de maneira organizada e responsiva, o Flexbox é seu novo melhor amigo.

1. O que é Flexbox?

Flexbox (Flexible Box Layout) é um sistema de layout unidimensional que permite controlar o alinhamento, espaçamento e distribuição de elementos dentro de um contêiner - mesmo quando o tamanho desses elementos é desconhecido ou dinâmico.

Pense no Flexbox como uma caixa de ferramentas para criar layouts que podem esticar, encolher ou alinhar dependendo do espaço disponível.

2. A magia começa com a exibição: flex

Para começar a usar o Flexbox, você só precisa definir display: flex em um contêiner. Depois de fazer isso, todos os filhos diretos desse contêiner se tornam flex items, e imediatamente começarão a se comportar de maneira diferente.

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
}

Agora, todos os itens dentro de .flex-container são itens flexíveis e podem ser facilmente manipulados.

3. Direção flexível – que caminho devemos seguir?

Por padrão, o Flexbox organiza os itens em uma linha (horizontalmente), mas e se você os quiser em uma coluna (verticalmente)? O Flexbox oferece controle total com a propriedade flex-direction.

• linha: Alinha itens em uma linha horizontal (este é o padrão).
• coluna: empilha itens em uma coluna vertical.
• row-reverse: O mesmo que row, mas a ordem dos itens é invertida.
• column-reverse: O mesmo que coluna, mas os itens são empilhados na ordem inversa.

.flex-container {
    display: flex;
    flex-direction: column;
}

Agora, os itens serão empilhados verticalmente!

4. Justificando Conteúdo – Divulgando as Coisas

Digamos que você tenha três itens e queira distribuí-los uniformemente em seu contêiner. É aqui que justify-content se torna útil.

• flex-start: os itens são alinhados ao início do contêiner (padrão).
• centro: os itens são centralizados.
• espaço entre: os itens são espaçados uniformemente, com o primeiro item no início e o último item no final.
• espaço ao redor: os itens são espaçados com preenchimento igual ao redor de cada item.

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

Agora, os itens serão espaçados uniformemente dentro do contêiner.

5. Alinhando Itens – Magia Vertical

Enquanto justificar o conteúdo controla o alinhamento horizontal, align-items cuida do alinhamento vertical (ou ao longo do eixo cruzado). Aqui estão suas opções:

• esticar: os itens se esticam para preencher o contêiner (padrão).
• flex-start: os itens são alinhados ao topo.
• flex-end: os itens são alinhados na parte inferior.
• centro: os itens são centralizados verticalmente.

.flex-container {
    display: flex;
    align-items: center;
}

Agora, todos os itens serão centralizados verticalmente dentro do contêiner.

6. Flex-Grow, Flex-Shrink e Flex-Basis – Ajustando os itens flexíveis

Às vezes, você deseja que certos itens aumentem, diminuam ou tenham um tamanho inicial fixo. As propriedades flex-grow, flex-shrink e flex-basis permitem controlar esse comportamento:

• flex-grow: Controla quanto um item deve crescer em relação aos outros itens.
• flex-shrink: Controla quanto um item deve diminuir em relação aos outros itens.
• flex-basis: Define o tamanho inicial do item antes que ele aumente ou diminua.

Exemplo:

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

Isso garante que o item comece em 100px, mas pode crescer para preencher espaço extra, se necessário, sem diminuir.

7. Exemplo de Flexbox em ação

Vamos juntar tudo isso com um exemplo!

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    flex-grow: 1;
}

Neste exemplo:

• Os itens são organizados em uma linha.
• Eles são espaçados uniformemente com justify-content: space-around.
• Todos os itens são centralizados verticalmente no contêiner com align-items: center.
• Cada item cresce para preencher o espaço disponível igualmente, graças ao flex-grow: 1.

8. Por que o Flexbox é demais

O Flexbox elimina grande parte da complexidade do design de layout com a qual costumávamos ter dificuldade em CSS. Chega de flutuações, não há mais preocupação com limpeza e design responsivo muito mais fácil!

Principais vantagens:

• Use display: flex para transformar um contêiner em um contêiner flexível.
• Use flex-direction para definir a direção do fluxo (linha ou coluna).
• Use justify-content e align-items para controlar o espaçamento e o alinhamento.
• Ajuste seus itens flexíveis com flex-grow, flex-shrink e flex-basis.

siga-me no LinkedIn-

Ridoy Hasan