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

Revolução: cinco anos de Satya Nadella no comando da Microsoft
Artigos
11 visualizações
Artigos
11 visualizações

Revolução: cinco anos de Satya Nadella no comando da Microsoft

Carlos L. A. da Silva - 18 de fevereiro de 2019

Como o novo CEO mudou completamente a percepção pública da Microsoft e conduziu a empresa para uma posição mais amigável na indústria.

Redux // Dicionário do Programador
Vídeos
9 visualizações
Vídeos
9 visualizações

Redux // Dicionário do Programador

Thais Cardoso de Mello - 18 de fevereiro de 2019

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

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

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

Carlos L. A. da Silva - 15 de fevereiro de 2019

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

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como salvar seus dados do Google Plus
Dicas
12 visualizações
12 visualizações

Como salvar seus dados do Google Plus

Carlos L. A. da Silva - 15 de fevereiro de 2019
Reagindo a Vagas de Emprego para Programadores // Vlog React #89
Vídeos
1,655 compartilhamentos6,814 visualizações
1,655 compartilhamentos6,814 visualizações

Reagindo a Vagas de Emprego para Programadores // Vlog React #89

Thais Cardoso de Mello - 14 de fevereiro de 2019
Manifesto Ágil: Tipos de demanda e classes de serviço
Artigos
17 visualizações
17 visualizações

Manifesto Ágil: Tipos de demanda e classes de serviço

Plataformatec - 12 de fevereiro de 2019
Mark Zuckerberg conseguiu destruir o Google Plus
Artigos
38 visualizações
38 visualizações

Mark Zuckerberg conseguiu destruir o Google Plus

Carlos L. A. da Silva - 11 de fevereiro de 2019