Este projeto foi desenvolvido com o objetivo de praticar e consolidar o uso do CSS Flexbox na construção de layouts modernos e responsivos.
A proposta foi criar uma interface completa sem utilizar float, position para alinhamentos estruturais ou valores fixos desnecessários. Toda a organização dos elementos foi feita exclusivamente com as propriedades do Flexbox.
Construir um layout totalmente responsivo aplicando:
- Distribuição dinâmica de espaço
- Alinhamento horizontal e vertical
- Controle de crescimento e encolhimento dos elementos
- Adaptação a diferentes tamanhos de tela
O layout foi dividido em seções principais:
- Header
- Seção principal (conteúdo)
- Cards organizados em linha e coluna
- Footer
Toda a estrutura foi organizada utilizando Flex Containers e Flex Items.
Foram utilizadas propriedades como:
display: flexflex-directionjustify-contentalign-itemsflex-wrapgap
Essas propriedades permitiram controlar completamente o comportamento dos elementos filhos.
Foram aplicadas propriedades como:
flex-growflex-shrinkflex-basisflexalign-selforder
Isso possibilitou criar componentes que se adaptam automaticamente ao espaço disponível.
A responsividade foi construída de forma natural utilizando:
flex-wrap- Controle de crescimento com
flex-grow - Ajustes com media queries quando necessário
Os elementos se reorganizam automaticamente conforme o tamanho da tela diminui ou aumenta.
- Entendimento claro dos eixos principal e cruzado
- Diferença entre container e item
- Como o espaço disponível é distribuído
- Como evitar larguras fixas
- Como centralizar elementos corretamente
O resultado foi um layout limpo, flexível e adaptável, construído utilizando apenas Flexbox como mecanismo de estruturação.
- HTML5
- CSS3 (Flexbox)