Este projeto foi desenvolvido a partir do HTML5 e CSS3, usando as propriedades do FLEXBOX. Atenção: Projeto conceito.
Desenvolver uma página principal utilizando as propriedades do FLEXBOX presentes no CSS3, com intuito de treinar conceitos e propriedadas utilizados no CSS.
- HTML5
- CSS3
- Flexbox
Aprendi que, para entender o funcionamento do Flexbox é necessário ter em mente alguns conceitos fundamentais que dizem respeito a como os itens são distribuídos no container. O principal deles é o conceito de eixo principal e eixo transversal, que depende do valor atribuído à propriedade flex-direction. Se essa propriedade receber o valor row ou row-reverse (organização em linhas), o eixo principal do container será o horizontal. Já se essa propriedade receber o valor column ou column-reverse (organização em coluna), o eixo principal será o vertical. Consequentemente isso definirá qual é o eixo transversal. Se o principal for o vertical, o transversal será o horizontal e vice-versa.
#Exemplos de comandos Flexbox :
.container {
display: flex;
flex-direction: [row / row-reverse / column / column-reverse];
}
.container {
display: flex;
flex-wrap: [nowrap / wrap / wrap-reverse];
}
.container {
display: flex;
}
O Flexbox é um ótimo recurso e acrescenta mais possibilidades no já vasto mundo do desenvolvimento web, mas vale ressaltar que apesar dos diversos benefícios que estas propriedades podem trazer ao processo de estilização no CSS3, o domínio dos comandos e estruturas são essenciais para uma aplicação mais acertiva.
- CSS3 Docs -A documentação disponível na página ao lado, foi bastante útil para sanar dúvidas.
- Font Awesome -Uma boa galeria de ícones.
- Linkedin - airtonlimajr