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

Skynet é real e é chinesa
Artigos
6 visualizações
Artigos
6 visualizações

Skynet é real e é chinesa

Carlos L. A. da Silva - 10 de dezembro de 2019

Cerca de 200 milhões de câmeras de vigilância estão em operação nesse momento no país, ligadas a uma rede do governo batizada como Skynet.

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

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

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

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

Como bloquear trolls no Twitter em larga escala
Dicas
18 visualizações
Dicas
18 visualizações

Como bloquear trolls no Twitter em larga escala

Carlos L. A. da Silva - 4 de dezembro de 2019

Ninguém está livre de cair na mira de uma horda virtual e saber se defender é fundamental.

Mais publicações

Como aproveitar ao máximo a Área de Transferência do Windows 10
Dicas
19 visualizações
19 visualizações

Como aproveitar ao máximo a Área de Transferência do Windows 10

Carlos L. A. da Silva - 28 de novembro de 2019
Tudo que você precisa saber sobre o USB4
Artigos
46 visualizações
46 visualizações

Tudo que você precisa saber sobre o USB4

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