Hey! I’m new to Flexbox and have just discovered the Flexbox game (https://www.flexboxgame.com/).
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
Set green circle flex-basis from Auto to 100% first, before changing container flex styles.
1 Like
Hint 2
You’ll need to Reverse Direction, Align End, Wrap Children on the container.
Hint 2 anwer
1 Like
Hint 3
You’ll need to set green circle Flex Child - Sizing - flex-basis to 100% and Order Last
Hint 3 answer
1 Like
Hint 4
You’ll need to change orange’s Order.
Hint 4 answer
1 Like
Hint 5
You’ll need to change purple’s Flex Child - Align.
Hint 5 answer
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!
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%
Container:
- direction: horizontal
- align stretch
- wrap-reverse and strech
– find the correct justify.
Number 2:
– find the correct align
Thanks to samliew
2 Likes
I achieved it with these settings and setting purple element on bottom alignment. Can someone explain me why is this working? 
We have not yet discovered a single, satisfactory answer to this puzzle. None of the above suggestions worked for me.
Simplified the hints and added screenshots.