O projeto está inativo

Estilizando a página de cursos

Neste exemplo 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, utilizando a propriedade Flex do CSS. Confira!

140

Propriedade Flex do CSS

Utilizando a propriedade Flex do CSS para deixar conteúdo responsivo

Neste exemplo 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. Veja nas Figuras 1 a 3 o exemplo em diversos tamanhos de tela.

exemplo funcionando
Figura 1. Execução do projeto em tela cheia
exemplo funcionando
Figura 2. Execução do projeto no tablet
exemplo funcionando
Figura 3. Execução do projeto em um smartphone

Essa organização é possível graças à propriedade display:flex do CSS, pois quando definimos o elemento filho de um contêiner, o mesmo pode ser disposto em qualquer direção e sua dimensão se torna flexível.

Suporte ao aluno Minhas dúvidas
Assine hoje e ganhe um usuário grátis
Estudar junto é mais divertido, chama o amigo!
12x de R$ 54,90
Corre, que é só em janeiro! Saiba mais
Benefícios
  • Ranking exclusivo da dupla
  • Metodologia focada no iniciante
  • Ensino baseado na execução de projetos reais
  • Suporte com professores online
  • + de 8000 exercícios gamificados

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar