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([Link] para a fixação do conteúdo.
Referências
16 / 18
Referências
Flexbox
CSS
Felipe
Teixeira
Flexbox
CSS
Flex
Container [Link]
Flex Item
[Link]
Exercícios
Referências
[Link]
[Link]
[Link]
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
