0 Compartilhamentos 329 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 enlouquecer os rastreadores de internet
Dicas
7 visualizações
Dicas
7 visualizações

Como enlouquecer os rastreadores de internet

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

Track This é um experimento criado pelo time do Firefox que vai alterar completamente o perfil que os anunciantes tem de você.

A história de Amazônia, o primeiro jogo brasileiro!
Artigos
8 visualizações
Artigos
8 visualizações

A história de Amazônia, o primeiro jogo brasileiro!

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

Como um programador iniciante criou um adventure clássico que atravessou décadas.

VIM (Amado ou Odiado?) // Dicionário do Programador
Vídeos
6 visualizações
Vídeos
6 visualizações

VIM (Amado ou Odiado?) // Dicionário do Programador

Thais Cardoso de Mello - 16 de setembro de 2019

Uma poderosa ferramenta, que dispensa apresentações, e vem sendo utilizada por muitas gerações de programadores.

Mais publicações

Promoções de Jogos do Final de Semana (13/09)
Notícias
10 visualizações
10 visualizações

Promoções de Jogos do Final de Semana (13/09)

Carlos L. A. da Silva - 13 de setembro de 2019
Como usar os novos atributos de link do Google
Dicas
11 visualizações
11 visualizações

Como usar os novos atributos de link do Google

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