Remembering the difference between items-end and justify-end is hard, and even more difficult to visualize in your head. This interactive demo makes it easy to get a grasp on using flex box with tailwind css by allowing you to...
- Toggle the Flex Direction, Alignment, and Justifyment (Justifying?) of items in a container
- Override the container Alignment by adding self alignment to any of the boxes
- Clearly view and toggle the visibility of the main and cross axes
- View a live updating code output that can easily be copied to the clipboard.
In the future, I may also add a visualization for grid layouts or add more classNames to apply to individual boxes.
This project is just a static next-js site.
bun install
bun devIt uses
- Shiki code highlighter
- js-beautify for syntax formatting
- Jotai with immer for state management