Task 1:
Task 2:
Task 3:
Task 4:
Page: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills#task_4
Thanks
Hi again @Sarai_Atoche_Pascual
Task 1 to 3 are correctly solved. 
If you compare your solution of task 4 with the solution image, you’ll see that your <li>s aren’t aligned on the right side. You’ll need one specific property on li { ... } to make it look like in the image.
Michael
1 Like
Yes, that’s correct.
The default values for the different flex properties are:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
Which allows resizing of the element based on its content. But only shrinking because of the 0 for grow.
With single values of flex it gets a bit tricky. For example flex: 1; is interpreted as a grow value and sets flex: 1 1 0 which ignores the content size. But flex: auto; is interpreted as a basis value and sets: flex: 1 1 auto;. This means you could also set flex: auto; in your code and it would have the same effect.
1 Like
