Visual CSS Flex (Flexbox) 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!
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:
- February 25, 2020:
- Moved second controller to the bottom.
- Add dark mode (flex items are now easier to see.)
- + Improved color theme
- September 5, 2018:
- Add ability to resize flex items vertically.
- + Add item_height to class flex constructor.
- + Add window.drag_y in global scope.
- + Add this.items_heights and this.item_height to the flex class constructor.
- + Change line-height on "drag and resize" item.
- + Update clipboard source code generator.
Learn CSS Visually! Every single CSS property visualized in this pictorial CSS guide book!
⭐⭐⭐⭐ and 1/2⭐ - owned by over 11.3K readers.