QR code component using Flexbox

Hello and congratulations on finishing the challenge!

In this particular case, you could have use flex-direction: column in your body, with that you will get both elements the main and the footer full centered.

In the case you want to position your footer at the end of the flex, using absolute positioning is not that bad idea since there isn't a justify-self property for flexbox, other way you could have archive this is changing the structure of your html and put your footer outside of the flex, for example having your flex in the main and the component inside a section tag.

Hope my feedback helps you! good job

👾Hello Rishat, congratulations for your solution!

Answering your question:

There are many ways to align this component, you can use position: relative/absolute, use display: grid, but you've done with the best way (my opinion) and more easy way too. With flexbox you don't need to manage many properties and have a lots of control over the elements, I guess you did the best choice for this challenge.

Your solution is really good and responsive, for me the only thing you've missed is giving a margin around the container to avoid the card touching the screen bounds when the solution becomes mobile, fix that doing main {margin: 24px;};

Congrats for the clean code and this beautiful solution!

Keep it up and happy coding!