0 Compartilhamentos 494 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

Promoções de Jogos do Final de Semana (03/07)
Notícias
9 visualizações
Notícias
9 visualizações

Promoções de Jogos do Final de Semana (03/07)

Carlos L. A. da Silva - 3 de julho de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

Como plugar um dispositivo USB corretamente… de primeira!
Dicas
11 visualizações
Dicas
11 visualizações

Como plugar um dispositivo USB corretamente… de primeira!

Carlos L. A. da Silva - 3 de julho de 2020

Impossível? Feitiçaria? A resposta estava bem diante de nossos olhos todo esse tempo...

Microsoft está mapeando o planeta inteiro para simulador de voo
Artigos
15 visualizações
Artigos
15 visualizações

Microsoft está mapeando o planeta inteiro para simulador de voo

Carlos L. A. da Silva - 1 de julho de 2020

A franquia Flight Simulator está prestes a renascer com um nível de realismo jamais alcançado antes.

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 um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (26/06)
Notícias
18 visualizações
18 visualizações

Promoções de Jogos do Final de Semana (26/06)

Carlos L. A. da Silva - 26 de junho de 2020
Os 10 melhores plugins de formulário para WordPress em 2020
Artigos
20 visualizações
20 visualizações

Os 10 melhores plugins de formulário para WordPress em 2020

Carlos L. A. da Silva - 26 de junho de 2020
Você precisa conhecer Deno
Artigos
23 visualizações
23 visualizações

Você precisa conhecer Deno

Carlos L. A. da Silva - 20 de junho de 2020
Promoções de Jogos do Final de Semana (19/06)
Notícias
24 visualizações
24 visualizações

Promoções de Jogos do Final de Semana (19/06)

Carlos L. A. da Silva - 19 de junho de 2020