Flexplorer: Generate Flexbox Code for Lists

If you're familiar with all the properties that comprise a flexbox layout, you're probably thinking "holy crap that's a lot of new CSS properties I have to remember". Indeed it is, but Flexplorer can help you learn them and even generate some of the code for you.

If you're not familiar with flexbox yet, here's a primer by CSS-Tricks. I recommend at least skimming through that before trying out Flexplorer so the concept will be a little less perplexing.

In short, you can play with various flexbox properties and the tool shows you a live preview of the resulting layout. You can change the number of items, direction, wrap, etc. This is a great way to visualize and create layouts for your next website, should you decide to start using flexbox. (Just keep in mind that it isn't supported in IE10 and below.)

Flexplorer is a free tool created by Bennett Feely.

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.