Série da semana: Buscas semânticas com Elasticsearch

Veja mais
O projeto está inativo

Conteúdo adaptável com CSS Flex

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!

32

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.

Descubra mais sobre CSS
Suporte ao aluno - Deixe a sua dúvida.
Achou 12 meses muito tempo?

Programação muda todo dia e cada novidade nos obriga a rever tudo que já sabíamos. Só um estudo contínuo nos leva ao sucesso.

Apenas 3,5% dos nossos assinantes querem cancelar antes dos 12 meses

O que nossos clientes dizem:

"Excelente trabalho. É assim que a gente vê que o investimento vale a pena. Parabéns!"

- Danniery Alves -
O que nossos clientes dizem:

"Prá lá de bom... Está ótimo: com clareza, didática, conhecimento de causa e uma boa dose de humor. "Persistência" é o segredo."

- Paulo Costa -
O que nossos clientes dizem:

"DevMedia ensina mais do que qualquer faculdade!!!"

- Mauricio Hartmann -