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 example below shows Image, Text and Button elements placed on the page. Since the Text element in default mode occupies the entire horizontal area, the Image and Button elements are rendered above and below that by the browser.
The same elements when placed inside a Flexible Area element get rendered as shown below.
Within the flexible area element, you have the freedom to effortlessly drag and drop various elements such as Image, Alert, Badged Text, Link, Text, Heading, Flexible Area, Button, etc. However, it's important to note that certain elements may have specific restrictions. For instance, a Layout Column can only be added to a Layout Row, adhering to its designated usage.
The Options tab settings for this element are described 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.
This setting has responsive design support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting.
The possible values are:
Default: Same as Left or Right depending on the locale of the user.
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.
This setting has responsive design support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting.
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.
