Assessment wanted for Test your skills: Flexbox - Tasks 1 - 4 🙏🏾

MDN
1

Hi there. Please could you give feed back on my attempt at these tasks. Thank you.

Given tasks:

Task 1:

Task 2:

Task 3:

Task 4:

2

Great work, @vusithedev

Here are my comment:

  • Task 1 and 2 are both correct.
  • Task 3: While margin: auto; works. There is a more “Flex way” to do centering. Can you think of the two properties you could put on the parent to center the child horizontally and vertically?
  • Task 4: When you compare your solution to the image, you’ll see that there are still differences. There’s another value for flex which will make them look the same.

I hope that helps. :slightly_smiling_face:

Have a nice day,
Michael

3

Hi Michael

Thanks for the feedback.

For Task 3:
The more “flex way” would be removing the margin: auto; and replacing it with

justify-content: center;
align-items: center;

As for Task 4:

I didn’t notice that slight difference, but

flex: 1 auto

in the li rule fixed that up.

1 Like
4

Yes, both are correct. :clap:

Instead of flex: 1 auto; you could also just write flex: auto;. That’s short for flex: 1 1 auto;.

1 Like