A container in Flowx is a versatile building block that empowers you to group components and arrange them as needed, providing flexibility in UI design. It can also serve as the root component for your design.
The following properties can be configured in the container:
When the container is not used as the root, you can configure only the Hide Condition property.By leveraging containers, you gain the ability to structure your UI elements efficiently, enhancing the overall design and usability of your application.
When designing for the web, consider the layout options available for the container. These options include:
Position
Static: The container remains fixed and does not scroll along with the page content.
Sticky: When the sticky property is enabled, the container maintains its position even during scrolling.
Sticky layout: You have the option to specify minimum distances between the container and its parent element while scrolling. At runtime, sticky containers will keep their position on scroll relative to top/ bottom/ right/ left margin of the parent element.
Direction: Choose between Horizontal or Vertical alignment to define the flow of components. For example, select Horizontal for a left-to-right layout.
Justify (H): Specify how content is aligned along the main axis. For instance, select end to align items to the end of the container.
Align (V): Align components vertically within their container using options such as top, center, or bottom alignment.
Wrap: Enable wrapping to automatically move items to the next line when they reach the end of the container. Useful for creating multi-line layouts.
Gap: Define the space between components to control the distance between each item. Adjusting the gap enhances visual clarity and organization.