Assessment Request for Flexbox Layout 1 Skill Test

Hi. I want my result to be assessed for Flexbox test. Any assessment would be appreciated. Thank you and have a good day!

flexbox1
flexbox2
flexbox3
flexbox4

Hello @harryghgim

you doing great well done

just a little thing for task 4 to make it look like the image use
justify-content: space-between;

so it make the extra space between the items

hope that help and have a nice day :slight_smile:

1 Like

Hi @justsomeone! Thanks for giving me an assessment.

One thing that itches me. In the test example picture each li looks slightly wider than mine. If I give padding right however, the last li makes another line.

Can I make it look more similar to the example picture?

Hello @harryghgim

you can do this by the following

ul {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}

li {
padding-right: 15px;
flex:1;
}

this the code i used inside the test page

hope that help and have a nice day

2 Likes

Hi @justsomeone again!

So flex: 1 in the li ruleset did all the charm. Thank you!

Have a great day too :sunglasses:

you very welcome

as you see you can solve it in many ways

thanks :slight_smile:

1 Like

I think a better way to do it would be

li {
flex: 1 auto;
}

Everything else seems right though!

1 Like

@Emannuel thanks for sharing that :slight_smile: