Ling.
Web1
Layout em CSS com Flexbox
1
Flexbox
● Flexbox provê ferramentas para criação de layouts
complexos e flexíveis, e características que se
mostraram historicamente difíceis com CSS.
● Por um longo tempo, as únicas ferramentas
compatíveis entre browsers disponíveis para
criação de layouts CSS eram coisas como floats e
posicionamento.
● Estas são boas e funcionam, mas em alguns casos
também são limitadas e frustrantes.
2
O modelo flex
3
O modelo flex
● O elemento pai que possui display: flex
configurado é chamado de flex container.
● Os itens iniciados como flexible boxes dentro do
flex container são chamados flex items
● O main axis é o eixo que corre na direção em que
os flex items estão dispostos. O início e o fim do
eixo é chamado main start e main end.
● O cross axis é o eixo perpendicular que corre na
direção em que os flex items são dispostos. O início
e o fim deste eixo são chamados de cross start e
cross end.
4
Propriedades para o flex container
● display ● justify-content
● flex-direction ● align-items
● flex-wrap ● align-content
5
HTML base
CSS base
display: flex;
flex container: flex-direction
● flex-direction: row | row-reverse | column |
column-reverse;
9
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex container: flex-wrap
● flex-wrap: nowrap | wrap | wrap-reverse;
13
adicionando largura aos elementos
Porque nao
obedeceu?
flex-direction: nowrap;
flex-direction: wrap;
flex container: justify-content
● justify-content: flex-start | flex-end | center |
space-between | space-around | space-evenly;
17
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
flex container: justify-content
● justify-content: flex-start | flex-end | center |
space-between | space-around | space-evenly;
21
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
flex container: align-items
● align-items: stretch | flex-start | flex-end | center |
baseline;
25
Observações
align-items
● Isso define o comportamento padrão de como os
itens flexíveis são dispostos ao longo do cross-axe
na linha atual.
26
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;
flex container: align-content
● align-content: flex-start | flex-end | center |
space-between | space-around | space-evenly |
stretch
32
Observações
align-content
● essa propriedade só tem efeito em contêineres
flexíveis de várias linhas, onde flex-wrap é definido
como wrap ou wrap-reverse.
● Um contêiner flexível de linha única (ou seja, onde
flex-wrap é definido com seu valor padrão, no-wrap)
não refletirá o conteúdo de alinhamento.
33
align-content
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: stretch;
align-content: space-between;
align-content: space-around;
flex container: gap
● gap: controla explicitamente o espaço entre itens
flexíveis. Aplica-se que o espaçamento apenas
entre os itens não nas bordas externas.
41
Links para saber mais
● Games para aprender flexbox
○ http://flexboxfroggy.com/
● Outros links uteis
○ https://demos.scotch.io/visual-guide-to-css3-flexbox-
flexbox-playground/demos/
○ https://philipwalton.github.io/solved-by-flexbox/
○ https://css-tricks.com/snippets/css/a-guide-to-flexbox
/
42
Obrigado!
Dúvidas?
Referencias
CSS-Tricks. (2019). A Complete Guide to Flexbox | CSS-Tricks. [online] Available at:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ [Accessed 2 Oct. 2019].
MDN Web Docs. (2019). Flexbox. [online] Available at:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox [Accessed 2 Oct. 2019].
