Prova de conceito sobre Flexbox
O projeto é uma prova de conceito que demonstra e especifíca cada uma das funcionalidades do Flexbox em CSS no HTML.
O projeto se baseia em uma prova de conceito que tem como ojbetivo comprovar a funcionalidade de cada uma das propriedades do Flexbox em CSS dentro de um código HTML.
N/A
Um flex-container é um elemento HTML x o qual ativa o layout Flexbox para todos os seus filhos diretos, que são os flex-items. O flex-container é responsável por distribuir o espaço disponível entre e ao redor dos flex-items.
A propriedade flex-direction especifica a direção na qual os itens flexíveis são organizados no flex-container -
Direction Column - Alinha os itens verticalmente, de cima para baixo:
Direction Column-reverse - Alinha os itens verticalmente, mas de baixo para cima.
Direction Row - Alinha os itens horizontalmente, da esquerda para a direita:
Direction row-reverse - Alinha os itens mas da direita para a esquerda:
A propriedade Flex-wrap funciona para que os itens flexíveis serão esticados ou encolhidos para caber dentro do flex-container sem quebrar para a próxima linha.
O Flex wrap-reverse faz com que os itens quebram em várias linhas ou colunas, mas a ordem de empilhamento das linhas ou colunas é invertida.
A propriedade justify-content controla como os itens flexíveis são alinhados e distribuídos ao longo do eixo principal do flex-container:
O Justify-center alinha os itens no centro do eixo principal:
O Justify flex-start Alinha os itens no início do eixo principal:
O Justify flex-end Alinha os itens no final do eixo principal:
O Justify space-around Distribui os itens com espaçamento igual ao redor de cada item:
O Justify space-between Distribui os itens com espaçamento igual entre eles, sem espaço extra nas bordas:
A propriedade align-items define como os itens flexíveis são alinhados ao longo do eixo transversal dentro de um flex-container:
O Align items center Alinha os itens no centro do eixo transversal:
O Align items flex-end alinha os itens no final do eixo transversal:
O Align items flex-start alinha os itens no início do eixo transversal:
O Align items stretch estica os itens para preencher o container ao longo do eixo transversal:
O Align items baseline alinha os itens com base na linha de base do texto:
A propriedade order determina a ordem na qual os itens flexíveis são exibidos dentro do flex-container:
A propriedade flex-grow define a proporção de espaço extra que um item flexível deve ocupar em relação aos outros itens dentro do container:
A propriedade flex-shrink determina o quanto um item deve diminuir quando o espaço no container é reduzido:
A propriedade flex-basis especifica o tamanho inicial de um item flexível antes que o espaço disponível no container seja alterado:
A propriedade Align-self fornece uma maneira de alterar o alinhamento de um item específico sem afetar os outros itens no mesmo container:
# Comando para executar o projeto
npm start