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

Como baixar o novo Windows Terminal
Dicas
8 visualizações
Dicas
8 visualizações

Como baixar o novo Windows Terminal

Carlos L. A. da Silva - 26 de junho de 2019

Ferramenta foi turbinada e já está disponível em versão de prévia para usuários do window

Libra: o que sabemos sobre a criptomoeda do Facebook
Artigos
7 visualizações
Artigos
7 visualizações

Libra: o que sabemos sobre a criptomoeda do Facebook

Carlos L. A. da Silva - 25 de junho de 2019

O anúncio oficial do Libra promete um futuro surpreendente para a maior rede social do mundo.

WebAssembly // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,807 visualizações
Vídeos
1,655 compartilhamentos6,807 visualizações

WebAssembly // Dicionário do Programador

Thais Cardoso de Mello - 24 de junho de 2019

Quer descobrir o que está por trás dessa tecnologia que já chega achando que pode sentar na janela do desenvolvimento web? Assista esse episódio e descubra!

Deixe um Comentário

Your email address will not be published.

Mais publicações

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

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

Carlos L. A. da Silva - 21 de junho de 2019
Histórias do Hotmail
Artigos
9 visualizações
9 visualizações

Histórias do Hotmail

Carlos L. A. da Silva - 21 de junho de 2019
Top 5 linguagens de programação para IA e Machine Learning
Vídeos
7 visualizações
7 visualizações

Top 5 linguagens de programação para IA e Machine Learning

Thais Cardoso de Mello - 20 de junho de 2019
8 jogos que foram cancelados para surgirem jogos diferentes
Artigos
7 visualizações
7 visualizações

8 jogos que foram cancelados para surgirem jogos diferentes

Carlos L. A. da Silva - 17 de junho de 2019