arrow cursor
< css tutorials

Flex Layout Editor / Share with others! Tweet It | CSS Visual Dictionary

This page was created as a free educational resource. Teachers (allegedly) use it in on-screen school presentations, students use it as a classroom reference, or just for fun!

cursor wide arrow
add +

remove -

Copied!
add +
remove -

Copied!
add +
remove -

Copied!
add +
remove -

Copied!
add +
remove -

Copied!
add +
remove -

Copied!
add +
remove -

Copied!

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.

Flex Layout Editor / Software Update History: