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

Quanto ganha um programador? Confira uma das maiores pesquisas salariais realizadas no Brasil
Notícias
5 visualizações
Notícias
5 visualizações

Quanto ganha um programador? Confira uma das maiores pesquisas salariais realizadas no Brasil

Redação - 23 de fevereiro de 2021

O Canal Código Fonte TV realizou uma pesquisa salarial com mais de 11 mil programadores brasileiros. Entre os dados coletados é possível analisar a média salarial por: tecnologia, idade, gênero, região, entre muitos outros insights.

Seus dados vazaram. E agora?
Artigos
9 visualizações
Artigos
9 visualizações

Seus dados vazaram. E agora?

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

Seus dados pessoais foram vazados e essa é uma verdade praticamente inevitável. A meta agora é minimizar os possíveis danos e cobrar autoridades.

Entendendo o elemento time em HTML 5
Artigos
15 visualizações
Artigos
15 visualizações

Entendendo o elemento time em HTML 5

Carlos L. A. da Silva - 5 de fevereiro de 2021

O tempo não para, já dizia a canção. E o tempo também faz parte de um conjunto de tags HTML que podem ser muito úteis no seu projeto.

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 uma Resposta para Alex Cancelar resposta

Your email address will not be published.

Mais publicações

Como cortar texto sem usar uma linha de script
Dicas
21 visualizações
21 visualizações

Como cortar texto sem usar uma linha de script

Carlos L. A. da Silva - 11 de janeiro de 2021
Como começar a programar
Artigos
28 visualizações
28 visualizações

Como começar a programar

Carlos L. A. da Silva - 7 de janeiro de 2021
Como cancelar qualquer conta online para sempre
Dicas
30 visualizações
30 visualizações

Como cancelar qualquer conta online para sempre

Carlos L. A. da Silva - 30 de dezembro de 2020
Retrospectiva (positiva) de 2020
Artigos
33 visualizações
33 visualizações

Retrospectiva (positiva) de 2020

Carlos L. A. da Silva - 29 de dezembro de 2020