vanessamie / flex-box

Site fictício Alurinha utilizando os conceitos de display flex, criado com conhecimentos adquiridos no curso da Trilha Front-End, parceria entre ONE e Alura.

Display Flex

Site "Cursos Alurinha", criado durante Trilha Front-End, curso:

• Flexbox: posicione elementos na tela.

• https://vanessamie.github.io/flex-box/

Conceitos aprendidos e aplicados:

• Display Fex;

• Flexbox no pai:

  • display: flex;
  • flex-direction;
    • row (padrão);
    • row-reverse;
    • column;
    • column-reverse;
  • justify-content;
    • center;
    • flex-start;
    • flex-end;
    • baseline;
    • space-around;
    • space-between;
    • stretch.
  • flex-wrap;
  • flex-flow;
  • align-items;
    • center;
    • flex-start;
    • flex-end;
    • baseline;
    • stretch.
  • align-content.
    • center;
    • flex-start;
    • flex-end;
    • baseline;
    • space-around;
    • space-between;
    • stretch.

• Flex no filho:

  • order;
  • flex-grow;
  • flex-shrink;
  • flex-basis;
  • flex;
  • align-self.

• Responsividade;

• Como acessar os filhos, ou múltiplos;

Observações

Eu não modfiquei o logo ou coloquei links, pois a intenção neste projeto não era esta, porém segue como projeto para o futuro!.

Em caso de sugestão ou alguma alteração, fiquem a vontade para entrar em contato! Toda contribuição é bem-vinda!

Gratidão à ONE, Alura e Instrutor Yuri Padilha.

Para saber mais:

• Joguinhos para treinar: http://flexboxfroggy.com/

http://www.flexboxdefense.com/

Materiais interessantes:

• SASS: CSS sintaticamente espetacular: https://www.alura.com.br/curso-online-sass-css-sintaticamente-espetacular

• LESS: https://lesscss.org/

• Organizando o CSS no seu projeto: https://www.alura.com.br/artigos/organizando-o-css-no-seu-projeto

• CSS FlexBox: distribua elementos de forma responsiva: https://cursos.alura.com.br/extra/alura-mais/css-flexbox-distribua-elementos-de-forma-responsiva-c301