Incredibly excited to introduce the thing we've been working on lately!
Now you can use CSS’s most powerful and intuitive layout tools right inside Webflow—without writing any code.
And to make it easier to learn flexbox, I've also put together a game that teaches you all the core flexbox concepts: www.flexboxgame.com
This is so cool. I'm constantly impressed with Webflow, it's really really impressive. The inspector UI alone is just great. I love that you get a preview of where an element is going to move when you hover over the different flex properties.
I got stuck at level 24/25 of the game. Any tips?? :)
Stuck at the same level
24: You want to play with order and width. Purple is the important one.
25: Same as before but don't forget about "Fill empty space" to solve remaining issues.
Let me know if you need more hints! I'm stuck on 26.
So impressed with Webflow's progress, I just wish I had an excuse to use it! This looks fantastic.
I don't really know why you use "width" on each cell why you could just do this with the flex-basis property?
Hey Wes, I'm using both
flex-basison different examples depending on context. I think It's nice to show that you can simply use
heighton flex items in case you don't need any specific growing/shrinking behavior.
Great tool, amazing content here. I got up to the 26 level without too much trouble. I am playing now with my own site. Could be possible to get the css for the play-game? can be it used as template, please? It is a little bit tedious to try to match the playground and circle styles in a new site. Thanks!
The hovering outline feature is great! I wasted several minutes on the first one, adjusting the settings for the circle and not its container.