- Node Studio Treinamentos - Projeto desenvolvido com objetivo de práticar as propriedades do flexbox.
- youtube - https://www.youtube.com/playlist?list=PLwXQLZ3FdTVGjLmjwfRc0Q9TA5U-PCWp4
- Google Fonts - https://fonts.google.com/specimen/Roboto
- CSS-Tricks - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Color - https://www.colourlovers.com/
- Gradient - https://cssgradient.io/
- Pexels - https://www.pexels.com/pt-br/
Projeto desenvolvido Hotel - Coder com as tecnológias HTML5, CSS3, com o objetivo de fixar os conhecimentos de Flexbox.
- display: flex; - Default na mesa linha
- flex-direction: row; - Default na mesa linha
- flex-direction: column; - Fica na mesma coluna, um abaixo do outro;
- flex-direction: row-reverse; - Na mesma linha do lado direiro da tela.
- flex-direction: column-reverse; - Na mesma coluna inicia do artigo 3.
- flex-wrap: wrap; - Quebra linha.
- flex-wrap: wrap; - Não quebra a linha.
- flex-wrap: wrap-reverse; - Quebra linha da Esquerda para Direita.
- flex-flow: row nowrap; - Default
- flex-flow: nowrap; - Quebra de linha
- justify-content: flex-start; Alinha os items da esquerda do container.
- justify-content: flex-end; Alinha os items na direita do container.
- justify-content: center; Alinha os items no centro do container.
- justify-content: space-between; - Alinha com espaçamento entre os elementos no container
- justify-content: space-around; - Alinha com espaçamento etre os elementos e com margin.
- align-items: stretch; - items crescem igualmente.
- align-items: flex-start; - Alinha os items no inicio do container.
- align-items: flex-end; - Alinha os items na base do container
- align-items: center; - Alinha os items no centro do container
- align-items: baseline; - Alinha o conteúdo.
- align-content:flex-start; - Alinha no inicio do container com quebra de linha.
- align-content:flex-end; - Alinha na base do container com quebra de linha.
- align-content:center; - Alinha os elementos no centro do container.
- align-content:space-between; - Alinha com espaçamento entre os elementos no container
- align-content:space-around; Alinha com espaçamento entre os elementos no container e com margim.
- align-content:stretch; - Preenchimento dos elementos igualmente.
- order: 3; - Server para alterar a posição dos elementos.
- align-self:stretch ; - Alinhameno padrão individual de um único elemento.
- align-self:flex-start; - Alinha os items no inicio do container.
- align-self:flex-end; - Alinha os elementos na base do container.
- align-self:center; - Alinha os elementos no centro do container.
- flex-grow: 0; - Default de todos os elementos
- flex-grow: 1; - Aumenta o tamanho do elemento
- flex-shrink: 1;- Diminue o valor do elemento
- flex: 1 1 300px - Valor Default.