Streaming live at 10am (PST)

Hints for Flexbox Game - Level 26

Hey! I’m new to Flexbox and have just discovered the Flexbox game (
It was really fun (and easy) until Level 26, but now I’m stuck. The hint says “Hint: the Align setting on individual flex children will help you.”, but Align on an individual item only works if “Wrap Children” is off, meaning it’s impossible to place them in different lines. What am I missing? Any hints on how to solve it? Will be very thankful!

Hint 1

You’ll need to change flex styles for the container, green circle, purple circle. You do not need to touch orange circle.

1 Like

Hint 2

You’ll need to change a total of three flex-styles for the container (click three different buttons/settings).

1 Like

Hint 3

You’ll need to set green circle flex-basis to 100%

1 Like

Hint 4

You’ll need to override purple’s alignment.

1 Like

Hint 5

You’ll need to Wrap Children and Reverse Wrap on the container.

1 Like

Hint 6

You’ll need to Justify End on the container.

1 Like

Wow, thank you so much! It worked, although I didn’t quite understand why. Seems like I’d been doing pretty much the same thing before, but could never get that purple circle to move in its place.
I‘ll keep playing around with it until I get it!

Can anyone please hold my hand and tell me where I did wrong, please?

Yeah, it was pretty much the same thing before.

because u should use justifyof wrap like stretch
Actually, I don’t know why someone thinks that in a game with flexbox they should put a game of margins paddings and etc… it’s stupid, I just thought about 3days how to do that crazy lvl 26 with using the only flexbox but already know how to do it without it…

What is flex-basis? Is it the same thing as setting the width to 100%

Close. These pages should clarify it for you.

From the University (Webflow)
Set the basis value to define the default size of an element before flex grow or flex shrink come into play. You can set this to a specific dimension (e.g., 20%, 250px, etc.) or Auto. If set to Auto, the default size of a flex child will be based on its width or height (if set) or its content. If set to a specific dimension, the content or width/height of an element will be ignored before distributing size between flex children.

From MDN

A few ways for solution 26.

Number 1:

  • width: 100%


  • direction: horizontal
  • align stretch
  • wrap-reverse and strech
    – find the correct justify.

Number 2:
– find the correct align

Thanks to samliew


Screenshot 2020-07-15 at 14.15.56

I achieved it with these settings and setting purple element on bottom alignment. Can someone explain me why is this working? :sweat_smile: