Bruna Lanzarini apresenta Flexbox, uma propriedade CSS usada para alinhar itens em um container de forma flexível. Ela explica como definir a direção dos itens, alinhá-los e distribuí-los, permitir ou não que eles quebrem linha, e fornece referências adicionais para mais detalhes sobre Flexbox.

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/