Flexible Area
Last updated
Last updated
The Flexible Area element is available under the 'Layout' category.
In general, elements on a web page can be divided into two categories based on how they occupy horizontal space:
Elements that only allow other elements to be positioned above or below them on the page.
Elements that allow other elements to be positioned to their left or right, as well as above or below them.
The Flexible Area element enables you to arrange elements side by side, even if they would not typically allow such positioning. This element provides the flexibility to create layouts where elements can coexist horizontally, hence the name Flexible Area.
The same elements when placed inside a Flexible Area element get rendered as shown below.
InlineWhen set to Yes, allows the elements next to the Flexible Area (not inside), to be rendered to the left or right and above or below it. This setting has no bearing on how the elements placed inside the flexible area get rendered.
Horizontal AlignControls how the elements inside the Flexible Area are spaced horizontally.
The possible values are:
Left: Aligns the elements inside the Flexible Area towards the left.
Center: Aligns the elements inside the Flexible Area towards the center.
Right: Aligns the elements inside the Flexible Area towards the right.
Space Around: Equally distribute the available space before and after each element.
Space Between: Distribute the available space between the elements.
Vertical AlignControls how the elements inside the Flexible Area are spaced vertically.
The possible values are:
Default: Same as Stretch on most browsers.
Top: Align the top of the elements together at the top of the Flexible Area.
Center: Align the center of the elements together at the center of the Flexible Area.
Bottom: Align the bottom of the elements together at the bottom of the Flexible Area.
Stretch: Equalizes the height of all the elements.
Baseline: Elements are aligned such that their baselines align.
The example below shows Image, and elements placed on the page. Since the element in default mode occupies the entire horizontal area, the Image and Button elements are rendered above and below that by the browser.
Within the flexible area element, you have the freedom to effortlessly drag and drop various elements such as , , , , , , , , etc. However, it's important to note that certain elements may have specific restrictions. For instance, a can only be added to a , adhering to its designated usage.
The settings for this element are described below:
This setting has support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting.
Default: Same as Left or Right depending on the of the user.
This setting has support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting.
