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

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

TypeScript // Dicionário do Programador

Thais Cardoso de Mello - 18 de março de 2019

TypeScript é o termo falado nesse Dicionário do Programador, conheça mais sobre o assunto.

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

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

Carlos L. A. da Silva - 15 de março de 2019

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

Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista
Vídeos
1,655 compartilhamentos6,812 visualizações
Vídeos
1,655 compartilhamentos6,812 visualizações

Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista

Thais Cardoso de Mello - 14 de março de 2019

Batemos um papo muito divertido e informativo com o Igor Oliveira (do canal Programador BR).

Deixe um Comentário

Your email address will not be published.

Mais publicações

World Wide Web completa 30 anos!
Notícias
13 visualizações
13 visualizações

World Wide Web completa 30 anos!

Carlos L. A. da Silva - 12 de março de 2019
Ada Lovelace: o cérebro que nunca morre
Artigos
134 visualizações1
134 visualizações1

Ada Lovelace: o cérebro que nunca morre

Carlos L. A. da Silva - 12 de março de 2019
Scrum // Dicionário do Programador
Vídeos
15 visualizações
15 visualizações

Scrum // Dicionário do Programador

Thais Cardoso de Mello - 11 de março de 2019