Flexbox

CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container
Flexbox CSS
Flex Item Programação para Internet I
Exercícios

Referências

Prof. Msc. Felipe Leivas Teixeira

Versão 1.0

1 / 18
 Flexbox
CSS

Felipe
Teixeira

Flexbox 1 Flexbox CSS

CSS

Flex
Container
2 Flex Container
Flex Item

Exercícios

Referências
3 Flex Item

4 Exercícios

5 Referências

2 / 18
 Flexbox
CSS

Felipe
Teixeira

Flexbox 1 Flexbox CSS

CSS

Flex
Container
2 Flex Container
Flex Item

Exercícios

Referências
3 Flex Item

4 Exercícios

5 Referências

3 / 18
 Flexbox CSS

Flexbox
CSS

Felipe
Teixeira
Flexbox é uma propriedade do CSS que torna mais fácil projetar uma estrutura de layout
Flexbox responsiva e flexível sem usar flutuação ou posicionamento
CSS

Flex
Container

Flex Item

Exercícios

Referências

4 / 18
 Flexbox CSS

Flexbox
CSS

Felipe
Teixeira
Flexbox é uma propriedade do CSS que torna mais fácil projetar uma estrutura de layout
Flexbox responsiva e flexível sem usar flutuação ou posicionamento
CSS

Flex Ajuda no alinhamento progressivo e dinâmico dos elementos da página em diversos dispositivos
Container

Flex Item

Exercícios

Referências

4 / 18
 Flexbox CSS

Flexbox
CSS

Felipe
Teixeira
Flexbox é uma propriedade do CSS que torna mais fácil projetar uma estrutura de layout
Flexbox responsiva e flexível sem usar flutuação ou posicionamento
CSS

Flex Ajuda no alinhamento progressivo e dinâmico dos elementos da página em diversos dispositivos
Container

Flex Item
Sem a necessidade de float, table, inline-block e outras propriedades que podem quebrar a página,
Exercícios
que podem causar problemas na progressividade e fluidez do layout
Referências

4 / 18
 Flexbox CSS

Flexbox
CSS

Felipe
Teixeira
Flexbox é uma propriedade do CSS que torna mais fácil projetar uma estrutura de layout
Flexbox responsiva e flexível sem usar flutuação ou posicionamento
CSS

Flex Ajuda no alinhamento progressivo e dinâmico dos elementos da página em diversos dispositivos
Container

Flex Item
Sem a necessidade de float, table, inline-block e outras propriedades que podem quebrar a página,
Exercícios
que podem causar problemas na progressividade e fluidez do layout
Referências

4 / 18
 Flexbox CSS

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container O estilo do elemento pai (Flex Container) controla o layout e fluidez dos elementos filhos (Flex
Flex Item Itens)
Exercícios

Referências

5 / 18
 Flexbox CSS

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container O estilo do elemento pai (Flex Container) controla o layout e fluidez dos elementos filhos (Flex
Flex Item Itens)
Exercícios
1 < section id=" container ">
Referências
2 < article class= "item">1</div>
3 < article class= "item">2</div>
4 < article class= "item">3</div>
5 </ section >

5 / 18
 Flexbox
CSS

Felipe
Teixeira

Flexbox 1 Flexbox CSS

CSS

Flex
Container
2 Flex Container
Flex Item

Exercícios

Referências
3 Flex Item

4 Exercícios

5 Referências

6 / 18
 Flex Container

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex O Flex Container é a tag que envolve os itens flex, ao indicar display: flex, essa tag passa a ser
Container
um Flex Container
Flex Item

Exercícios

Referências

7 / 18
 Flex Container

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex O Flex Container é a tag que envolve os itens flex, ao indicar display: flex, essa tag passa a ser
Container
um Flex Container
Flex Item
As principais propriedades de definição de um flex container são:
Exercícios

Referências

7 / 18
 Flex Container

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex O Flex Container é a tag que envolve os itens flex, ao indicar display: flex, essa tag passa a ser
Container
um Flex Container
Flex Item
As principais propriedades de definição de um flex container são:
Exercícios
flex-direction
Referências
flex-wrap
flex-flow
justify-content
align-items
align-content

7 / 18
 Flex Container

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS
flex-direction: define em qual direção o container deseja empilhar os itens flexíveis
Flex
Container
1 flex-direction: column;
Flex Item

Exercícios

Referências

8 / 18
 Flex Container

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS
flex-direction: define em qual direção o container deseja empilhar os itens flexíveis
Flex
Container
1 flex-direction: column;
Flex Item

Exercícios flex-wrap: especifica se os itens flexíveis devem ser agrupados ou não

Referências
1 flex-wrap: wrap;

8 / 18
 Flex Container

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS
flex-direction: define em qual direção o container deseja empilhar os itens flexíveis
Flex
Container
1 flex-direction: column;
Flex Item

Exercícios flex-wrap: especifica se os itens flexíveis devem ser agrupados ou não

Referências
1 flex-wrap: wrap;

flex-flow: é uma propriedade abreviada para definir as propriedades flex-direction e flex-wrap

1 flex-flow: row wrap;

8 / 18
 Flex Container

Flexbox
CSS

Felipe
Teixeira

Flexbox justify-content: alinha os itens flex no container de acordo com a direção. A propriedade só
CSS
funciona se os itens atuais não ocuparem todo o container
Flex
Container 1 justify-content: center;
Flex Item

Exercícios

Referências

9 / 18
 Flex Container

Flexbox
CSS

Felipe
Teixeira

Flexbox justify-content: alinha os itens flex no container de acordo com a direção. A propriedade só
CSS
funciona se os itens atuais não ocuparem todo o container
Flex
Container 1 justify-content: center;
Flex Item

Exercícios align-items: alinha os flex itens de acordo com o eixo do container. O alinhamento é diferente para
Referências quando os itens estão em colunas ou linhas
1 align-items: center;

9 / 18
 Flex Container

Flexbox
CSS

Felipe
Teixeira

Flexbox justify-content: alinha os itens flex no container de acordo com a direção. A propriedade só
CSS
funciona se os itens atuais não ocuparem todo o container
Flex
Container 1 justify-content: center;
Flex Item

Exercícios align-items: alinha os flex itens de acordo com o eixo do container. O alinhamento é diferente para
Referências quando os itens estão em colunas ou linhas
1 align-items: center;

align-content: Alinha as linhas do container em relação ao eixo vertical. A propriedade só

funciona se existir mais de uma linha de flex-itens. Para isso o flex-wrap precisa ser wrap
1 align-content: stretch;

9 / 18
 Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container

Flex Item

Exercícios

Referências
EXEMPLO FLEX CONTAINER

10 / 18
 Flexbox
CSS

Felipe
Teixeira

Flexbox 1 Flexbox CSS

CSS

Flex
Container
2 Flex Container
Flex Item

Exercícios

Referências
3 Flex Item

4 Exercícios

5 Referências

11 / 18
 Flex Item

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container
Os Flex Itens são os filhos diretos do Flex Container
Flex Item

Exercícios

Referências

12 / 18
 Flex Item

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container
Os Flex Itens são os filhos diretos do Flex Container
Flex Item As principais propriedades de flex item são:
Exercícios

Referências

12 / 18
 Flex Item

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container
Os Flex Itens são os filhos diretos do Flex Container
Flex Item As principais propriedades de flex item são:
Exercícios order
Referências
flex-grow
flex-shrink
flex-basis
flex
align-self

12 / 18
 Flex Item

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS
order: especifica a ordem dos flex itens
Flex
Container
1 order: 1;
Flex Item

Exercícios

Referências

13 / 18
 Flex Item

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS
order: especifica a ordem dos flex itens
Flex
Container
1 order: 1;
Flex Item

Exercícios flex-grow: especifica quanto um flex item irá crescer em relação ao resto dos flex itens
Referências
1 flex-grow: 2;

13 / 18
 Flex Item

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS
order: especifica a ordem dos flex itens
Flex
Container
1 order: 1;
Flex Item

Exercícios flex-grow: especifica quanto um flex item irá crescer em relação ao resto dos flex itens
Referências
1 flex-grow: 2;

flex-shrink: especifica o quanto um flex item irá encolher em relação ao resto dos flex itens.
1 flex-shrink: 0;

13 / 18
 Flex Item

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS
flex-basis: especifica o comprimento inicial de um flex item
Flex
Container
1 flex-basis: 200 px;
Flex Item

Exercícios

Referências

14 / 18
 Flex Item

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS
flex-basis: especifica o comprimento inicial de um flex item
Flex
Container
1 flex-basis: 200 px;
Flex Item

Exercícios flex: é uma propriedade que simplificao uso das propriedade flex-grow, flex-shrinke flex-basis
Referências
1 flex: 0 1 100 px;

14 / 18
 Flex Item

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS
flex-basis: especifica o comprimento inicial de um flex item
Flex
Container
1 flex-basis: 200 px;
Flex Item

Exercícios flex: é uma propriedade que simplificao uso das propriedade flex-grow, flex-shrinke flex-basis
Referências
1 flex: 0 1 100 px;

align-self: especifica o alinhamento do item selecionado dentro do recipiente flexível

1 align-self: center;

14 / 18
 Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container

Flex Item

Exercícios

Referências
EXEMPLO FLEX ITEM

15 / 18
 Exercícios

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container

Flex Item

Exercícios
1 Jogue o jogo Flexbox Froggy(https://flexboxfroggy.com/) para a fixação do conteúdo.
Referências

16 / 18
 Referências

Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container https://www.w3schools.com/css/css3_flexbox.asp
Flex Item
https://www.w3schools.com/css/css3_flexbox_container.asp
Exercícios

Referências
https://www.w3schools.com/css/css3_flexbox_items.asp
https://origamid.com/projetos/flexbox-guia-completo/
https://flexboxfroggy.com/

17 / 18
 Flexbox
CSS

Felipe
Teixeira

Flexbox
CSS

Flex
Container
Flexbox CSS
Flex Item Programação para Internet I
Exercícios

Referências

Prof. Msc. Felipe Leivas Teixeira

Versão 1.0

18 / 18