The Flexbox component
The Flexbox component allows you to structure and arrange your objects along a main axis, either in a row or a column. Thanks to this system, elements automatically expand or shrink to occupy the available space, offering a flexible and responsive layout, particularly suited to mobile interfaces.
The Flexbox component is a valuable tool for designing responsive interfaces, especially for small screens like smartphones or tablets, which require optimal space management. Combined with the Responsive option, it allows you to quickly optimize the display for different screen resolutions without manually redefining each element's size or position.
What is Flexbox Layout?
Flexbox is a layout model based on a main axis, allowing you to arrange elements fluidly, either in a row or a column. This intelligent system automatically adjusts the size of elements according to the available space within the container, creating a flexible and dynamic structure.
A Flexbox container consists of two main entities:
- The container: It serves as a wrapper for a set of flexible elements.
- The child elements: Each element inside the container automatically positions itself according to the defined properties.
You can orient these elements along two axes:
- Horizontal: Elements are placed side by side.
- Vertical: Elements are stacked from top to bottom.
Thanks to the wrap property, you can allow these elements to automatically wrap onto multiple lines or columns if there is insufficient space.
Inserting a Flexbox Component
Click on Components and insert the Flexbox component.
Place it where you want your elements to appear.
Inside, insert each of your elements within a Group component.
In the Properties, you have the option to define the following properties:
- Orientation: Choose between horizontal or vertical layout according to your needs.
- Wrap Children: This wrapping option allows elements to automatically move to the next line when there is no more space available on the main axis.
- Spacing between elements: Manage the space around and between your elements for a clean and readable layout.
- Scrolling: If your content exceeds the visible size of the container, you can activate the scrollbar.
- Scrollbar: Customize the appearance and activation of the scroll.
- Maintain scroll position: This option allows you to keep the user's position when they go back to the screen.
Layout inside the Flexbox Component
Inside the Flexbox component, objects automatically position themselves relative to each other, following the order in which they appear in the list of elements. This order determines their positioning on the main axis, and each element is positioned according to its place in the list. To change the position of an object, you must move it directly within the list, which makes the layout somewhat rigid and limited.
Regarding the management of object sizes, you must directly define their width and height in their individual properties. However, if you want more flexibility in formatting and customizing an element, it is recommended to place the object within a Group component. Within this group, you can freely manage its dimensions, alignment, and other formatting properties, while benefiting from the Flexbox's flexibility for the overall layout.
Scroll to an Object
The Flexbox component is not just a simple structure. It also offers interactive actions, such as Scroll to a specific object.
You can set an action for the Flexbox component to automatically scroll to a specific element. Here's how:
- Select the triggering object (e.g., a button).
- Add a new action by selecting Interact with a component > Flexbox > Scroll to an object.
- Select the target element and specify where the scrolling will stop.
