0 Compartilhamentos 2352 Views 2 Comments

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!

Carregando...

Você pode se interessar

Por que eu decidi não migrar para o Windows 11 agora
Artigos
127 visualizações
Artigos
127 visualizações

Por que eu decidi não migrar para o Windows 11 agora

Carlos L. A. da Silva - 19 de outubro de 2021

O novo sistema operacional da Microsoft está entre nós, mas talvez não seja uma boa ideia pular de cabeça.

Enumerando e analisando mais de 40 implementações de JavaScript (que não são V8)
Artigos
252 visualizações
Artigos
252 visualizações

Enumerando e analisando mais de 40 implementações de JavaScript (que não são V8)

Carlos L. A. da Silva - 6 de outubro de 2021

V8 é o interpretador JavaScript, também chamado de máquina virtual Javascript, desenvolvido pela Google e utilizado em seu navegador Google Chrome. Com o peso de seus criadores e a quase onipresença do navegador, foi apenas uma questão de tempo para essa implementação do JavaScritp se tornar dominante no mercado. Entretanto, um bom desenvolvedor sabe que […]

Sir Clive Sinclair, o homem adiantado no tempo
Artigos
435 visualizações
Artigos
435 visualizações

Sir Clive Sinclair, o homem adiantado no tempo

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

O inglês Clive Marles Sinclair nasceu de uma família de engenheiros. Seu avô foi engenheiro, assim como o seu pai. Com um talento natural pela Matemática e um forte interesse em eletrônica, ele se tornaria uma página importante da popularização da computação em diversas partes do mundo, construindo um legado que se perpetuará por anos […]

2 Responses

  1. Nossa que top Vanessa, estou estudando flex box e pensei em ter uma colinha de modelo de paginas
    Parabéns muito bom conteudo.

    Resposta
  2. Artigo legal, simples, mas, muito interessante! Parabéns pela matéria Wanessa! Obrigado!

    Resposta

Deixe um Comentário

Your email address will not be published.

Mais publicações

A cibersegurança por trás das vacinas
Artigos
538 visualizações
538 visualizações

A cibersegurança por trás das vacinas

Carlos L. A. da Silva - 7 de setembro de 2021
Top 25 comandos do Git
Artigos
678 visualizações
678 visualizações

Top 25 comandos do Git

Carlos L. A. da Silva - 28 de agosto de 2021
Dez anos de Kotlin: origens e futuro
Artigos
733 visualizações
733 visualizações

Dez anos de Kotlin: origens e futuro

Carlos L. A. da Silva - 20 de agosto de 2021