0 Compartilhamentos 202 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
13 visualizações
Notícias
13 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
8 visualizações
Artigos
8 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,813 visualizações
Vídeos
1,655 compartilhamentos6,813 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
17 visualizações
17 visualizações

Retrospectiva 1998!

Carlos L. A. da Silva - 13 de dezembro de 2018
RegExp // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,810 visualizações
1,655 compartilhamentos6,810 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
24 visualizações
24 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
19 visualizações
19 visualizações

Entenda o formato de imagem WebP

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