Developer Notes: CSS flex is hard to learn from static pictures alone. Mainly this is due to flex item behavior when individual item dimensions change. Also the stretch value doesn't always work as expected when item size is too small. This flex layout designer was created to demonstrate css flex in all of its manifestations and make the flex learning process a bit easier. Click on items to resize them to see what happens. Change justify-content property to different values and see how it affects the entire set. Add or Remove items from the flex list by clicking on appropriate buttons. When happy with your flex layout, simply click Copy To Clipboard to save your results.

Be Notified Every Time Something New Is Published Or Updated.

I am constantly working on new useful free CSS tools for teachers, designers, coders and makers of things. If you'd like to receive all of our new quality CSS generators & freemium-premium css tutorials (soon as they come out), you are welcome to subscribe below.

By subscribing you will receive access to my occasional (good software is hard to make!) updates. Also, any useful look-up diagrams or tutorials with high educational value will be given away for free.