0 Compartilhamentos 2656 Views 2 Comments

Modelos de páginas com Flexbox

27 de fevereiro de 2018

Se você já conhece o Flexbox sabe o quanto ele simplificou a nossa vida! Com ele é possível desenvolver layouts adaptáveis sem ter a dor de cabeça de usar floats, positions e todos os clears para que os elementos ficassem onde queríamos.

Nesse código a minha ideia é apresentar alguns dos modelos de templates bem simples, mas que são muito utilizados. Daí você o que se encaixa no seu projeto, copia, cola e manda ver no restante. 😉

Mais tarde vamos fazer um guia mais completo para que você possa conhecer “todo o poder” do Flexbox, e a partir daí fazer o que vc realmente quiser!

Mas chega e papo e vamos aos códigos!!

Flexbox – Modelo 1

Como uma imagem diz mais do que mil palavras, melhor do que tentar descrever o layout é mostrá-lo. E logo em seguida você vai encontrar o código necessário para gerá-lo.


Flexbox – Modelo 2


Flexbox – Modelo 3


Flexbox – Modelo 4

Para construir esse layout temos duas opções:

Primeira: fazer toda a estrutura da página utilizando o Flexbox.

Segunda: Podemos deixar o Header e o Footer, que nunca serão flexíveis, fixos usando sistema já conhecido de block layout. E usar o Flexbox apenas no “miolo” do site. Assim:

Bem pessoal por hoje é só! Como falei no início são modelos bem básico com códigos bem simples, ideal para quem está começando a mexer com Flexbox ou apenas para facilitar a sua vida copiando e colando. Espero que ajude!

Se quiser fazer alguma observação, deixa aí nos comentários.

Até mais!

Carregando...

Você pode se interessar

Rust é o futuro da infraestrutura JavaScript
Artigos
20 visualizações
Artigos
20 visualizações

Rust é o futuro da infraestrutura JavaScript

Carlos L. A. da Silva - 6 de dezembro de 2021

Lee Robinson explica como e por que o Rust está penetrando em cenários antes dominados pelo JavaScript.

Influenciadores digitais que não existem
Artigos
101 visualizações
Artigos
101 visualizações

Influenciadores digitais que não existem

Carlos L. A. da Silva - 2 de dezembro de 2021

Na era da pós-verdade, influenciadores que não são reais estão ganhando espaço para uma multidão que quer ser influenciada

Pais criam aplicativo de código aberto melhor que o da escola, mas a polícia é acionada
Artigos
233 visualizações
Artigos
233 visualizações

Pais criam aplicativo de código aberto melhor que o da escola, mas a polícia é acionada

Carlos L. A. da Silva - 23 de novembro de 2021

Aplicativo oficial do sistema educacional da capital Suécia era ruim demais, mas a lei é a lei...

2 Responses

  1. Nossa que top Vanessa, estou estudando flex box e pensei em ter uma colinha de modelo de paginas
    Parabéns muito bom conteudo.

    Resposta
  2. Artigo legal, simples, mas, muito interessante! Parabéns pela matéria Wanessa! Obrigado!

    Resposta

Deixe uma Resposta para Alex Cancelar resposta

Your email address will not be published.

Mais publicações

10 recursos HTML5 úteis que você pode não estar usando
Artigos
484 visualizações
484 visualizações

10 recursos HTML5 úteis que você pode não estar usando

Carlos L. A. da Silva - 6 de novembro de 2021
O Metaverso está vindo?
Artigos
545 visualizações
545 visualizações

O Metaverso está vindo?

Carlos L. A. da Silva - 1 de novembro de 2021
Por que eu decidi não migrar para o Windows 11 agora
Artigos
648 visualizações
648 visualizações

Por que eu decidi não migrar para o Windows 11 agora

Carlos L. A. da Silva - 19 de outubro de 2021