Click an item in the preview to edit its properties
Flexbox (Flexible Box Layout) is a CSS3 layout mode designed for aligning and distributing space within a container, even when item sizes are unknown or dynamic. It simplifies complex layout implementations.
flex-grow defines how items grow (how extra space is distributed), flex-shrink defines how items shrink (when space is insufficient), and flex-basis defines the initial size. Shorthand: flex: grow shrink basis.
justify-content controls alignment along the main axis, while align-items controls alignment along the cross axis. The main axis direction is determined by flex-direction.