Olá, aqui é o Davi e neste post eu vou trazer a você uma baita de uma boa notícia!
Venho te contar o que aprendi com CSS 3, que é sobre a propriedade Display com o seu valor Flex (display:flex;).
Assistir a vídeo-aula e seguir as dicas abaixo é essencial para você descobrir como criar layouts responsivos melhores apenas com HTML e CSS. Bora começar!
Eu sofri com CSS mas encontrei uma solução
Sofrimento! Essa é a palavra que define o que eu passava quando estilizava um layout com CSS.
Eu usava tabela e float:left/right para agrupar as divs ou quaisquer elementos, até aí tudo bem, pois agrupava sem problemas. Depois abandonei a tabela e usava só float.
Mas quando se tratava de layout responsivo começava o sofrimento pois na hora de definir margin e padding o layout se desestruturava.
Sendo assim, eu tinha que arrumar isso a cada break point que surgia, gerando um código absurdamente grande no CSS e o layout ainda não ficava 100% alinhado.
Se você já passou e ainda passa por isso meu caro amigo (a) este post é para você, saiba que existe uma solução, um melhor caminho e ele se chama “flex”.
A solução que encontrei
Bom, agora quero mencionar a solução!
Estive lendo em sites de desenvolvedores, e na W3C sobre o display:flex e descobri que trabalhar com ele é bem melhor que trabalhar com float:left/right.
Se você aprender a manipular todo o conceito você cria layouts flexíveis ótimos para trabalhar com responsive design. Fiz testes e adorei os resultados.
Só de descobrir que aplicando a estilização CSS adequada eu não passaria mais pelo problema com margin e padding minha satisfação foi imensa.
Há muito tempo procurava um jeito de concertar efetivamente esses erros e display:flex e outras propriedades e valores do Flexbox CSS tornaram isso possível.
Ao utilizar display:flex você vai ver que mesmo usando margin e padding o layout não quebra mas se adapta conforme as resoluções de tela vão mudando.
Faça o download do código aqui
Não deixe de assistir a vídeo aula disponibilizada neste post, nela explico na prática como funcionam o float e o flex, os erros do float e a solução com flex.
Vou deixar aqui o link de download do código usado na vídeo-aula para que você observe como o float deixa a desejar quando se trata de layout responsivo, como ele é bem imperfeito.
Acesse: Código da vídeo-aula
Já com os arquivos baixados, aconselho que você os abra no navegador e redimensione seu navegador arrastando-o para a esquerda e direita ou use as ferramentas que testam layouts responsivos do seu navegador para ver como as coisas funcionam.
Pratique para alcançar resultados melhores
Depois que você aprender a manipular essa maravilha do CSS 3 tenho certeza que seus trabalhos ficarão mais otimizados, com código menor e soluções mais fáceis de ser alcançadas, pratique pois isso te levará a criar trabalhos cada vez melhores.
Eu aprendi e estou colocando em prática isso em meus trabalhos, e você se quiser aprender também se esforce. É importante que você também leia o artigo da W3C no link abaixo para aprender melhor:
Flexbox CSS – W3C.
Enfim, meu amigo (a) que veio até aqui e leu este post, assistiu a vídeo-aula, leu o artigo da W3C, você que foi esforçado (a), pois gosta de aprender para evoluir, parabéns! Saiba que essa sua atitude é fundamental para que você seja um desenvolvedor (a) de sucesso, continue assim.
Quer se tornar um desenvolvedor (a) FULLSTACK e ser capaz de desenvolver QUALQUER web site, aplicações web a até aplicativos por menos de R$ 10,90 por dia? Podendo ter acesso a mais de 1000 AULAS? Clique aqui e saiba como.
Então amigo (a) vou terminando este post, espero que tenha te ajudado com a minha experiência.
Obrigado por visitar meu blog, compartilhe com seus amigos esse post, me acompanhe nos outros endereços que tenho pela web onde eu posto mais sobre o mundo digital. Fique com Deus e um abraço.