Curso
Conteúdo adaptável com CSS Flex
Neste curso front-end veremos como criar uma página onde a altura dos boxes se ajusta, assim o layout da página não quebra devido ao tamanho do seu conteúdo, usando a propriedade Flex do CSS. Confira!
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
4 horas
Curso de CSS Flex (4 aulas)
Aula 1 - Propriedade Flex do CSS
Neste vídeo apresentamos o desenvolvimento de um conteúdo que tem por finalidade ajustar a altura dos seus elementos automaticamente. Dessa forma, podemos trabalhar com conteúdos dinâmicos sem a preocupação de quebras em nosso layout.
Aula 2 - Estrutura do HTML
No cabeçalho da página referenciamos a nossa folha de estilos, o arquivo style.css. Definiremos o corpo do documento e todo o conteúdo.
Aula 3 - Formatação com CSS
Agora definimos as propriedades que englobam o conteúdo principal, que são as classes .wrapper e .block. Em ambas definimos o display como flexível (flex).
Aula 4 - Criação das Media Queries
Por fim, definimos todos os media query que são utilizados nesse exemplo, lembrando que estes não influenciarão na propriedade flex, mas utilizamos os mesmos apenas para ajustar a largura do box e a altura das imagens.
Veja outros cursos de HTML e CSS
CSS: Flexbox
CSS: Position relative e absolute
CSS: Position fixed