Flexbox
Flexbox allows you to control the alignment of elements in a box in any way you’d like. The elements expand or retract to fit into the available space.
The Flexbox component makes your layout easier, especially for adapting to mobile screens with limited width. Coupled with the Dynamic Layout option, it allows you to easily set up a responsive layout.
Flexbox is a layout method based on one main axis, allowing you to arrange elements in rows or columns. The elements expand or shrink according to the available space.
The Flexbox layout consists of a container and one or more "elements" inside. The elements are placed in a single axis, you can choose between "horizontal" or "vertical". The elements take care of their own positioning and adaptation. For example, you just have to specify the "wrap" property to the container so that they can be arranged in several lines if necessary.
The 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 window, you can set the following properties:
- The choice of the axis: horizontal or vertical
- Spacing between elements
- Wrapping of items (shift an item to the next line if necessary)
