Curso de CSS Flexbox para Desenvolvedores Front-end - Prof. Petrenco, Slides de Estilística

Baixe Curso de CSS Flexbox para Desenvolvedores Front-end - Prof. Petrenco e outras Slides em PDF para Estilística, somente na Docsity!

Karen Santos Desenvolvedora Front-end

CSS Flexbox

Objetivo do curso

Apresentar os fundamentos e aplicações da

propriedade flexbox na criação de layouts

responsivos, sem a necessidade a definição de

valores fixos.

Percurso

Aula 1 Introdução ao Flexbox

Aula 2 Fundamentos do Flexbox

Aula 3 Projeto integrador

[Nome do palestrante] [Posição]

[Nome do curso]

[Nome da aula]

Dúvidas durante o

curso?

> Fórum do curso

> Comunidade online (discord)

Objetivos da aula

1. Conhecer a estrutura básica 2. Entender a diferença entre Flex Container e Flex Item 3. Conhecer inicialmente alguma propriedades

Suporte

Foi projetado como um modelo de layout unidimensional e como um método que pode oferecer distribuição de espaço entre itens em uma interface e recursos de alinhamento.

Flex Container

● display ● flex-direction ● flex-wrap ● flex-flow

● justify-content ● align-items ● align-content

Propriedades relacionadas:

Flex Item

São os elementos filhos diretos do Flex Container. E também podem se tornar Flex Container.

flex-item1 flex-item3 flex-item

container

[Nome do palestrante] [Posição]

[Nome do curso]

[Nome da aula]

Aula 2: Fundamentos

parte 1 - flex container

CSS Flexbox

[Nome do palestrante] [Posição]

[Nome do curso]

[Nome da aula]

Display Flex

Objetivo da aula

1. Conhecer e aplicar a propriedade de inicialização do flex container

Display: flex;

Torna a tag um elemento do tipo flex container, e assim automaticamente todos os seus filhos diretos desta tag, tornam- se em flex items.

container

div, span, section, h1,h2,..., a

Objetivos

1. Entender o comportamento padrão de orientação **horizontal de um flex container

2. Aprender a modificar a orientação horizontal**

Flex-direction

É a propriedade que estabelece o eixo principal do container, definindo assim a direção que os flex items são colocados no flex container.