Skip to content
Submitted 11 months ago

Pagina de QR Code usando Css Flexbox

João Paulo•70
@JoaoPaul-S
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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

  • Rafael Dias•910
    @rafaeldgeoPosted 11 months ago

    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

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