0 Compartilhamentos 203 Views

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!

Você pode se interessar

Promoções de Jogos do Final de Semana (14/12)
Notícias
15 visualizações
Notícias
15 visualizações

Promoções de Jogos do Final de Semana (14/12)

Carlos L. A. da Silva - 14 de dezembro de 2018

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

Rastros Digitais: A sua vida está na Internet
Artigos
9 visualizações
Artigos
9 visualizações

Rastros Digitais: A sua vida está na Internet

Redação - 14 de dezembro de 2018

Tudo aquilo que fazemos deixa marcas e, na internet, não é diferente. Saiba mais sobre os rastros digitais e os cuidados que você deve tomar!

IoT: Nossa Casa Automatizada // Unboxing Google Home Hub – Vlog #83
Vídeos
1,655 compartilhamentos6,814 visualizações
Vídeos
1,655 compartilhamentos6,814 visualizações

IoT: Nossa Casa Automatizada // Unboxing Google Home Hub – Vlog #83

Thais Cardoso de Mello - 13 de dezembro de 2018

Apresentamos Google Home Hub! Confira e descubra o que esse gadget pode fazer por você.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Retrospectiva 1998!
Artigos
21 visualizações
21 visualizações

Retrospectiva 1998!

Carlos L. A. da Silva - 13 de dezembro de 2018
RegExp // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,812 visualizações
1,655 compartilhamentos6,812 visualizações

RegExp // Dicionário do Programador

Thais Cardoso de Mello - 10 de dezembro de 2018
Promoções de Jogos do Final de Semana (07/12)
Notícias
26 visualizações
26 visualizações

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

Carlos L. A. da Silva - 7 de dezembro de 2018
Entenda o formato de imagem WebP
Artigos
21 visualizações
21 visualizações

Entenda o formato de imagem WebP

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