Flexbox is a powerful layout mechanism that lets you solve common responsive web design problems with ease. If you want to learn how to design real flexbox-powered layouts, check out Webflow's all-new 100% visual flexbox builder.
If you want to explore how to design real flexbox-powered layouts, check out Webflow's all-new 100% visual flexbox builder.
Spread the word or scroll down to play!
Move the green circle into the outline using Flex Layout settings.
Use Flex Layout settings on the Playground element to move circles 1 and 2 to their corresponding outlines.
You got this.
In addition to distributing items along the main layout direction, you can also align them along the opposite axis (in this case vertical).
So let's move those circles one more time, eh?
Now combine your horizontal and vertical alignment skills to center the green circle.
You know what to do.
Up until now, the main layout direction was set to Row. To switch the layout from horizontal to vertical, apply Direction: Column.
Notice that the outlines are now reversed. Looks like that Reverse Layout setting might help ...
These circles are reversed too! Looks like you'll need to use your new skills again ...
You know what to do!
One more reversed layout for ya!
All flex items try to fit on one line—unless you Wrap Children ...
Now use the multi-line alignment settings below the Wrap Children setting to center these guys.
Keep working with those multi-line alignment settings under Wrap Children!
Hint: Use Column layout and Wrap Children!
You can override the flex layout of an individual element inside of a flex container by selecting it and applying Flex Child Settings.
Hint: Select the green circle and apply Align in Flex Child Settings!
Hint: Reverse layout on the flex container and change alignment on two of the flex children!
Sizing presets can be used on the flex children.
Select any green circle and apply a Sizing preset so they Expand. Since they have the same class applied they will expand and fill the empty space equally.
It's the same idea as the last level but only one circle needs to expand.
Sizing presets can also be combined with width or height.
Hint: the green circle should have Width: 200px.
The order of the children can be overwritten on the individual elements.
Select the green circle and apply Order: First to push it to the start.
Try changing the order of the 2nd and 3rd circles.
Now combine what you've just learned about changing the order of flex items with the things you know about wrapping children onto multiple lines.
Hint: Guess what you need to do if you want a flex child to span across full width of its parent container? Right! Just set its Width to 100%! 😎
No hints this time :(
Hint: the Align setting on individual flex children will help you.
Again, utilize different Align settings on some of those staggered flex children.
Now combine all the things you've learned today to solve this! 💥