CSS FLEXBOX - Conceitos iniciais
CSS - Flexbox
Aula 1 - Introdução ao Flexbox
Aula 2 - Fundamentos do Flexbox
Aula 3 - Projeto integrador
====================================================================================
Projeto de Proposta final
====================================================================================
Introdução ao Flexbox
Entender a diferença entre Flex container e Flex Item
Conhecer inicialmente algumas propriedades do Flex Item.
Foi projetado como um modelo de layout unidimensional e como um método
que pode oferecer distribuição de espaço entre itens em uma interface
e recursos de alinhamento.
====================================================================================
Flex Container
É tag que envolve os itens, será nela que iremos aplicar a propriedade 'display flex'.
Transforma todos seus filhos em flex itens.
====================================================================================
Flex Container
Propriedades relacionadas:
Display - Inicializador do conteiner
Flex-direction - direcionamento em linhas e colunas
Flex-wrap - quebra de linha
Flex-flow - A propriedade é uma propriedade abreviada para:flex-flow
flex-direção
flex-wrap
Nota: Se os elementos não forem itens flexíveis, a propriedade não tem efeito.flex-flow.
Justify-content - alinha de acordo com a direção
align-items - alinha de acordo com o eixo do container
align-content - alinha as linhas do container
====================================================================================
Flex items
São os elementos filhos diretos do Flex container.E Também podem se tornar
Flex Container.
Flex Items
Propriedades relacionadas:
Flex-grow - define o fator de crescimento
Flex-basis - define o tamanho inicial do item antes da distribuição do espaço
restante dentro do container
Flex-shrink - define a capacidade de redução
Flex - é uma propriedade abreviada
order - relaciona a ordem de distribuição e listagem do item.
Align-self - alinhamento de um item específico dentro de um container.
