0 Compartilhamentos 414 Views 1 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!

Você pode se interessar

IBM amplia Call for Code Challenge 2020 para enfrentar o COVID-19
Notícias
5 visualizações
Notícias
5 visualizações

IBM amplia Call for Code Challenge 2020 para enfrentar o COVID-19

Redação - 7 de abril de 2020

A IBM está expandindo o desafio global Call For Code 2020 para abordar a reação do mundo com o COVID–19, além das mudanças climáticas: duas questões urgentes que podem comprometer nossa saúde, nosso planeta e nossa sobrevivência.

Que fim levou o Windows Phone?
Artigos
6 visualizações
Artigos
6 visualizações

Que fim levou o Windows Phone?

Carlos L. A. da Silva - 6 de abril de 2020

A longa história de estratégias equivocadas da Microsoft em dispositivos móveis e o fim de um sonho.

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

Promoções de Jogos do Final de Semana (03/04)

Carlos L. A. da Silva - 3 de abril de 2020

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

One Response

  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

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como descobrir se tem um “fantasma” no seu teclado
Dicas
19 visualizações
19 visualizações

Como descobrir se tem um “fantasma” no seu teclado

Carlos L. A. da Silva - 2 de abril de 2020
Trabalhando de casa
Artigos
27 visualizações
27 visualizações

Trabalhando de casa

Carlos L. A. da Silva - 30 de março de 2020
Promoções de Jogos do Final de Semana (27/03)
Notícias
26 visualizações
26 visualizações

Promoções de Jogos do Final de Semana (27/03)

Carlos L. A. da Silva - 27 de março de 2020
Aprenda Dart em sete dias sem sair de casa e sem pagar nada
Artigos
29 visualizações
29 visualizações

Aprenda Dart em sete dias sem sair de casa e sem pagar nada

Carlos L. A. da Silva - 23 de março de 2020