Flexbox sem chutar

Nesta talk abordaremos a propriedade Flexbox do CSS: finalidade, dicas para o uso correto e demonstrações.
• Demo CodePen: https://codepen.io/brunadl/

Transcript

1. FLEXBOX SEM CHUTAR
2. HELLO, WORLD! Bruna Lanzarini 19 anos Graduanda em Sistemas de Informação Estagiária Front-End na Inova Seller Entusiasta de tecnologia e ama doguíneos @brunadl brunadl linkedin.com/in/brunadl/
3. CSS Cascading Style Sheets Usado para estilizar elementos escritos em uma linguagem de marcação como HTML. O CSS separa o conteúdo da representação visual do site.
4. Como fazemos isso?
7. Flexbox em Ação Alinhar e distribuir espaços entre itens em um container Layouts unidimensionais simplificados
8. Imagem: iMasters https://imasters.com.br/front-end/flexbox-explicado-em-gifs
9. Flexbox em Ação • Display: flex; Colocamos o display: flex; na classe da div qual queremos que os itens (filhos) internos sejam alinhados. É dizer: torne-se flexível, de acordo com seus itens internos.
10. Flexbox em Ação • Flex-direction: row; column; row-reverse; column-reverse; Define a direção dos itens internos. Por padrão ele é row (linha), A mudança de row para column geralmente acontece quando estamos definindo os estilos em media queries para o mobile. Assim você garante que o conteúdo seja apresentado em coluna única.
11. Flexbox em Ação • Justify-content: flex-start; flex-end; space-around; space-between; Alinha os itens usando a proporção entre eles e a div que os abriga. Space-around leva em consideração as proporções laterais enquanto que o space-between a desconsidera.
12. Flexbox em Ação • Align-items: flex-start; flex-end; center; stretch; baseline; O align-items alinha os itens de acordo com o eixo do container. O alinhamento é diferente para quando os itens estão em colunas ou linhas.
13. Flexbox em Ação • Flex-wrap: wrap; no-wrap; wrap-reverse; Define se os itens devem quebrar ou não a linha. Por padrão eles não quebram linha, isso faz com que os itens sejam compactados além do limite do conteúdo. Essa é geralmente uma propriedade que é quase sempre definida como flex-wrap: wrap; Pois assim quando um dos itens atinge o limite do conteúdo, o último item passa para a coluna debaixo e assim por diante.
14. Dúvidas ou Complementos?
15. https://www.youtube.com/watch?v=dbVQ qcV9iEc&t=749s Sugestões
16. Referências • Demonstrações CodePen https://codepen.io/brunadl/ • Referências https://origamid.com/projetos/flexbox-guia-completo/ https://www.impacta.com.br/blog/2019/04/10/flexbox-ou-css-grid- saiba-quando-utilizar-cada-ferramenta/ https://www.w3schools.com/css/css3_flexbox.asp https://www.youtube.com/watch?v=dbVQqcV9iEc&t=749s
17. OBRIGADA <3 Bruna Lanzarini 19 anos Graduanda em Sistemas de Informação Estagiária Front-End na Inova Seller Entusiasta de tecnologia e ama doguíneos @brunadl brunadl linkedin.com/in/brunadl/