Modelos de páginas com Flexbox
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

Quanto ganha um programador? Confira uma das maiores pesquisas salariais realizadas no Brasil
Redação - 23 de fevereiro de 2021O 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?
Carlos L. A. da Silva - 19 de fevereiro de 2021Seus 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
Carlos L. A. da Silva - 5 de fevereiro de 2021O 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
Deixe uma Resposta para Alex Cancelar resposta
Mais publicações




Nossa que top Vanessa, estou estudando flex box e pensei em ter uma colinha de modelo de paginas
Parabéns muito bom conteudo.
Artigo legal, simples, mas, muito interessante! Parabéns pela matéria Wanessa! Obrigado!