Assessment wanted for -> Flexbox skill test

MDN Learn
,
#1

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

Any advice is always welcome. :smiley:

#2

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?

2 Likes
#3

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:

#4

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:

2 Likes
#5

Now I got it!

I just need to add :

li {
  flex: auto;
{

Thank you @megan. This was a tricky solution!

2 Likes
#6

Thank you for this!

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

2 Likes
#7

You’re welcome @George_Daris!