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

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

Como cortar texto sem usar uma linha de script

Carlos L. A. da Silva - 11 de janeiro de 2021

Conheça o poder da propriedade text-overflow no CSS e nunca mais edite strings no braço.

Como começar a programar
Artigos
18 visualizações
Artigos
18 visualizações

Como começar a programar

Carlos L. A. da Silva - 7 de janeiro de 2021

Então, você quer entrar nessa vida? A decisão é sua, mas nós podemos te ajudar com os primeiros passos.

Como cancelar qualquer conta online para sempre
Dicas
21 visualizações
Dicas
21 visualizações

Como cancelar qualquer conta online para sempre

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

Que tal fazer uma limpeza nas suas contas inativas ou finalmente largar aquela rede social que só dá desgosto?

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

Retrospectiva (positiva) de 2020
Artigos
23 visualizações
23 visualizações

Retrospectiva (positiva) de 2020

Carlos L. A. da Silva - 29 de dezembro de 2020
O que seria internet quântica?
Artigos
23 visualizações
23 visualizações

O que seria internet quântica?

Carlos L. A. da Silva - 23 de dezembro de 2020
Como fazer uma árvore de Natal… com CSS!
Dicas
30 visualizações
30 visualizações

Como fazer uma árvore de Natal… com CSS!

Carlos L. A. da Silva - 21 de dezembro de 2020
Promoções de Jogos do Final de Semana (18/12) – Edição Natalina
Notícias
34 visualizações
34 visualizações

Promoções de Jogos do Final de Semana (18/12) – Edição Natalina

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