Assessment wanted for -> Flexbox skill test

Here’s the assessment, my code and a live example.

Any advice is always welcome. :smiley:

Layouts One, Two and Three are all good, nothing to say here :slight_smile: .

For Layout Four, it’s a small nitpick, but on the image, the vegetable boxes are laid out justified: the left and right borders are straight.
How would you do that using flexbox?


Thank you @megan! I didn’t notice they were justified on the image.

This might be resolve by adding: justify-content: space-between;

I’ll be updating my code as soon as possible. :smiley:

Well now, your boxes are justified… but on the image, the gaps between the boxes are the same size, and they’re of different sizes in your implementation ^^"

You might have to adjust how the width of the vegetable boxes are calculated :wink:


Now I got it!

I just need to add :

li {
  flex: auto;

Thank you @megan. This was a tricky solution!


Thank you for this!

I had done the rest, but couldn’t figure out how to make it look exactly like the image.


You’re welcome @George_Daris!