Criando um layout bonitão com Flexbox
Uma forma mais simples e sutil de estruturar layouts
Desde de sempre usei o modelo que chamamos de "Model Box" com a ajuda dos mágicos Floats(left e right) e dos Positions(top, bottom, left e right) para estruturar os meus layouts.
Com a chegada do Responsive Design o Flexbox surge como melhor solução para criar layouts com CSS3, pois o seu uso garante que os elementos se adaptem melhor em diversos tamanhos de telas e de dispositivos móveis.
A estrutura
Vamos criar uma estrutura simples que pode ser aplicada em sites, sistemas e aplicativos móveis.
A marcação
Com base na estrutural inicial, vamos criar o nosso html.
Copie e cole o código abaixo ;)
O estilão.css
Vamos entender passo-a-passo como os elementos se comportam no layout e as propriedades utilizadas.
Precisamos de um elemento que ocupe toda a área da tela e tenha uma direção de coluna.
Quando tiver um tempinho, coloque: border: solid 2px red; para ver o comportamento do .layout
Aqui é bem simples, declaramos apenas uma cor de fundo e uma altura para o header e para o footer. Nada de novo.
É aqui que as coisas começam a fazer sentido. Se olharmos a estrutura do html, a section agrupa os elementos nav, article e aside, por isso declaramos o display: flex para que seus "filhos" se comportem como caixas flexíveis. Também existe um cálculo para que a section ocupe toda a tela.
Nos elementos nav, aside e article perceba que usamos o flex-grow. O flex-grow diz o quanto de espaço o elemento irá ocupar na tela no eixo-X relativo ao tamanho da tela.
No article temos um código comentado, o Order. O order: -1; simplesmente ordena a posição do elemento na tela. Ele pode ser usado quando queremos que o layout tenha uma disposição em desktop e outra no mobile.
Copie e cole o código abaixo ;)
Repositório
Criei um repositório no Github caso tenha interesse em utilizar este layout em seu projeto. Fique à vontade para fazer uma melhoria do código.
Conclusão
Estamos em 2017 e agora acredito que o mundo possa criar layout bonitos com CSS3 sem ter a preocupação dos suportes dos browser's e dos dispositivos móveis.
Dicas
👉 👉 👉 👉 👉 Instagram jeffalbuquerque
→ ASSINE NOSSA NEWSLETTER! E fique por dentro de tudo o que acontece no Ateliê de Software da Webgoal.
Dê um alô pra gente! E nos acompanhe nas redes sociais:
→ Email: contato@atelie.software
→ Site
→ Facebook
→ Instagram
→ Twitter
→ Youtube
