everaldobass / hotel-coder

Hotel - Coder

Creditos

• Node Studio Treinamentos - Projeto desenvolvido com objetivo de práticar as propriedades do flexbox.
• youtube - https://www.youtube.com/playlist?list=PLwXQLZ3FdTVGjLmjwfRc0Q9TA5U-PCWp4

Links

• 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.

Páginas do Projeto.

Home

Sobre

Reserva

Contato

Conteúdo do Curso de Flexbox.

Propriedades

Aplicar as propriedades na class container

flex | row | collun | row-reverse | column-reverse

• 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 | collmun | row-reverse | column-reverse | flex-flow

• 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

flex-start | flex-end | center | space-between | space-around

• 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.

stretch | flex-start | flex-end | center | baseline

• 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.

flex-start | flex-end | center | space-between | space-around

• 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 | stretch | flex-start | flex-end | center

• 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.

0 | flex | grow | shirink

• 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.