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

10 jogos que todo programador deveria conhecer
Artigos
42 visualizações
Artigos
42 visualizações

10 jogos que todo programador deveria conhecer

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

Jogos podem ser mais do que uma forma de entretenimento: podem também ser uma ferramenta de aprendizado.

Trybe e XP se unem na formação de novos desenvolvedores de software
Notícias
8 compartilhamentos183 visualizações
Notícias
8 compartilhamentos183 visualizações

Trybe e XP se unem na formação de novos desenvolvedores de software

Gabriel Fróes - 27 de julho de 2021

A Trybe e a XP Inc. se uniram e estão trazendo uma baita oportunidade pra você que quer entrar na área de desenvolvimento de softwares, quer muito ter uma excelente formação, mas não tem condições financeiras para tal. É a Turma XP que vai disponibilizar 300 vagas para o curso de desenvolvimento web da Trybe, […]

Lado a lado com a Inteligência Artificial: qual é o impacto que isso pode causar na programação?
Artigos
104 visualizações
Artigos
104 visualizações

Lado a lado com a Inteligência Artificial: qual é o impacto que isso pode causar na programação?

Carlos L. A. da Silva - 26 de julho de 2021

As máquinas vão dominar a programação e seu trabalho está ameaçado?

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

Por que usar Tailwind CSS
Artigos
326 visualizações
326 visualizações

Por que usar Tailwind CSS

Carlos L. A. da Silva - 7 de julho de 2021
Os doze melhores scripts para galeria de imagens em 2021
Artigos
397 visualizações
397 visualizações

Os doze melhores scripts para galeria de imagens em 2021

Carlos L. A. da Silva - 28 de junho de 2021
Windows 11 vem aí?!
Artigos
519 visualizações
519 visualizações

Windows 11 vem aí?!

Carlos L. A. da Silva - 15 de junho de 2021
As “gambiarras” que os desenvolvedores de jogos utilizam
Artigos
680 visualizações
680 visualizações

As “gambiarras” que os desenvolvedores de jogos utilizam

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