A flexible layout component for building responsive layouts. It abstracts standard CSS Flexbox properties and includes container-query based responsiveness.
Experiment with all flex properties. Drag the handle on the right to test responsiveness.
Easily switch between row and column layouts.
Controls how space is distributed along the main axis. Useful for navbars and footers.
Controls alignment along the cross axis. Notice how 'Stretch' fills the height.
Controls whether items should wrap to the next line when they run out of space. Drag the handle to see it in action.
The 'containerQueryResponsive' prop automatically adjusts gap, direction, and wrapping based on the container size, not the screen size.