Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pagina de QR Code usando Css Flexbox

@JoaoPaul-S

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Esse é o primeiro desafio que faço então seria bem vindo um feedback sobre o código em algumas questões por exemplo.

  1. Com o flex-direction em configuração de column as funções do justify-content e align-content se invertem? Ou foi apenas um bug muito conveniente?

  2. Muitas vezes tentei setar as configurações de borda da imagem do qr-code por exemplo junto das configurações de posição no mesmo seletor, gostaria de saber pq não funciona de jeito nenhum, ainda me falta muito estudo quanto a isso.

Community feedback

P

@rafaeldgeo

Posted

Parabéns @JoaoPaul-S! Seu desafio ficou muito bom!

Tentando responder suas dúvidas:

  1. Sim! Quando você muda o padrão do flex-direction que é row, para column, o justify-content e o align-content invertem. Muitas vezes, ou quase sempre eu prefiro usar o align-items para alinhar (row - vertical / column - horizontal) os item em relação ao container, talvez tenha sido isso sua intenção.

"A propriedade CSS align-content define a distribuição entre e ao redor dos items do conteúdo do eixo transversal de uma flexbox ou do eixo de bloco de uma grid." (é o justify-content no eixo y)

"A propriedade CSS align-items (...) estabelece o alinhamento de um certo item dentro do bloco que o contém. "

2- Você pode usar o padding na div da imagem para dar o espaço entre a div e a imagem, seria como seu fosse uma borda interna. Não sei se entendi bem a sua dúvida...

O caminho não é fácil, mas faz parte. Só praticando para a gente ir entendendo e aperfeiçoando... E sempre busque inserir um recurso novo que aprendeu com a duvida do desafio passado.

Espero ter ajudado! Vamos firme nos estudos!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord