Layout Components

Layout components such as rx.flex, rx.container, rx.box, etc. are used to organize and structure the visual presentation of your application. This page gives a breakdown of when and how each of these components might be used.

rx.box is a generic component that can apply any CSS style to its children. It's a building block that can be used to apply a specific layout or style property.

When to use: Use rx.box when you need to apply specific styles or constraints to a part of your interface.

rx.stack is a layout component that arranges its children in a single column or row, depending on the direction. It’s useful for consistent spacing between elements.

When to use: Use rx.stack when you need to lay out a series of components either vertically or horizontally with equal spacing.

The rx.flex component is used to create a flexible box layout, inspired by CSS Flexbox. It's ideal for designing a layout where the size of the items can grow and shrink dynamically based on the available space.

When to use: Use rx.flex when you need a responsive layout that adjusts the size and position of child components dynamically.

rx.grid components are used to create complex responsive layouts based on a grid system, similar to CSS Grid Layout.

When to use: Use rx.grid when dealing with complex layouts that require rows and columns, especially when alignment and spacing among multiple axes are needed.

The rx.container component typically provides padding and fixes the maximum width of the content inside it, often used to center content on large screens.

When to use: Use rx.container for wrapping your application’s content in a centered block with some padding.