Loading Web-Dev-Pictionary...

Like Pictionary, but for flex-boxes.

Did you mean:

Press "R" to reset.

HTML

Welcome! Front-end development is not easy. There are millions of properties and tags out there, and choosing the right one isn't easy, especially when it comes to flex-boxes. While flex-boxes are used everywhere in modern web, they are notorius for their crazy amount of properties for even the simplest design pattern. I've created Web-Dev-AI as a way to quickly and visually to overcome my struggle with flex-boxes. Click and drag to draw a design in the container on the left. Web-Dev-AI will guess what it is and return you the design pattern's HTML and CSS.

CSS

Looks empty. 
            
Click and drag to draw an item.