Flexbox Card

This layout offers a flexible and responsive design structure.

This is the default card layout when you start to design application pages. A flexbox card aligns and distributes the items along a main axis. Objects placed within a flexbox card are laid out next to each other, row-wise or column-wise. When we drag and drop plug-in objects, they get rearranged to follow the one-dimensional layout concept.

The ideal way to use a flexbox card is when you have objects that require flexibility to grow and shrink, and fit within the layout. Use the flexbox properties to control the alignment and distribution of the objects (items).

Flexbox Properties

Field Name Description
Columns The card occupies the specified number of columns on the page grid.
Rows The card occupies the specified number of rows on the page grid.
Position X Applies to the horizontal placement of the card on the page. When the value is 0, the card is placed on the left-most side of the page. As you increase the value, the card moves away from the left side of the page.
Position Y Applies to the vertical placement of the card on the page. When the value is 0, the card is placed at the top of the page. As you increase the value, the card moves away from the top of the page.
Flex Direction The objects are arranged next to each other based on these placement directions:
  • Row: The objects within the card are placed horizontally, from left to the right.
  • Column: The objects within the card are placed vertically, from top to bottom.
  • Row reverse: The objects within the card are placed horizontally, from right to left.
  • Column reverse: The objects within the card are placed vertically, from bottom to top.

See Flex Row, Flex Row and Column.
Flex Wrap By default, objects within the card are not wrapped.
  • Nowrap: All the objects within the card try to fit into a single line, as per the flex direction.
  • Wrap: The objects are evenly spaced, and are arranged in multiple lines, as per the flex direction. The wrap orientation is from top to bottom.
  • Wrap reverse: The objects are evenly spaced, and are arranged in multiple lines, as per the flex direction. The wrap orientation is from bottom to top.

See Flex Wrap.
Justify Content You can choose from these options to align objects along the main axis (left to right):
  • Flex start: Objects are pushed towards the start of the direction (left).
  • Flex end: Objects are pushed towards the end of the direction (right).
  • Center: Objects are pushed towards the center of the direction (horizontal center).
  • Space between: Objects are evenly spaced on a single line.
  • Space around: Objects are evenly spaced on a single line, with equal amount of space around them.
Align Items You can choose from these options to align objects along the cross axis (top to bottom):
  • Flex start: Objects are pushed towards the start of the direction (top).
  • Flex end: Objects are pushed towards the end of the direction (bottom).
  • Center: Objects are pushed towards the center of the direction (vertical center).
  • Baseline: Objects choose a baseline (for example, title of the object) and align accordingly.
  • Stretch: Objects stretch to fill the card.
Layout Type Choose from the following card layouts before starting to design your pages:
  • Coordinate: Objects dropped on this layout stay where they are on the page. See Coordinate Card.
  • Flexbox: Objects dropped on this layout are automatically arranged on a single line.
Row Gap Provide a value to specify the spacing or gap between rows in a flexbox layout. It defines the vertical space between adjacent flex items when stacked vertically within the layout.
Column Gap Provide a value to specify the spacing or gap between columns in a flex layout. It defines the horizontal space between flex items when arranged in multiple columns within the layout.
Unit Apply a unit of measurement for the row/column gap values.
  • Pixel (px) values reflect the exact pixel size on the screen.
  • Percent (%) values reflect percentage of the parent container's size.
Flex Grow Enter a value for the object to grow in size with the flexbox layout. The value determines how much the object will grow in comparison to other objects within the layout.
Flex Shrink Enter a value for the object to shrink in size with the flexbox layout. The value determines how much the object will shrink in comparison to other objects within the layout.
Flex Basis This default property is the initial size of the objects within the flexbox layout. You can grow/shrink this size.
Style Select these check boxes to format the objects:
  • Rounded Corners: Adds a rounded corner instead of a pointed corner.
  • Custom Colors: Adds color.
Function Layout functionalities:
  • Card: This is the regular flexbox layout option without any additional functionalities.
  • Interactive Map: This flexbox layout includes an interactive map functionality. See Interactive Map.
  • Repeater: This flexbox layout includes a repeater functionality. You can create multiple instances of a plug-in dropped in a repeater layout. Refer to Repeater layout properties.
Backgroung Image See Set Background Image.
Show/Hide Select +Add Conditions to create conditions to show or hide the card. See Apply Conditions.
Height This value dynamically sets the height of the plug-in on a flexbox layout.

The plug-in dimensions are determined by the layout mechanism being used (coordinate or flex layout). The height and width values are not considered from the plug-in manifest.
Width This value dynamically sets the width of the plug-in on a flexbox layout.

The plug-in dimensions are determined by the layout mechanism being used (coordinate or flex layout). The height and width values are not considered from the plug-in manifest.
Unit Apply a unit of measurement for the height/width values.
  • Pixel (px) values reflect the exact pixel size on the screen.
  • Percent (%) values reflect percentage of the parent container's size.
Flex Grow The value determines how much the plug-in should grow with respect to other objects placed on the same flex layout. Enter a numeric value, which represents the proportion of available layout area the plug-in should occupy.

Example: If two plug-ins have flex grow values of 1 and 2 respectively, the second plug-in takes up twice as much area as the first plug-in.
Flex Shrink The value determines how much the plug-in can shrink if there is not enough area available on a flex layout. Enter a numeric value to specify the desirable shrink size.

If the total size of the flex objects exceeds the size of the layout, the flex shrink value determines how much each object should shrink relative to others. If the flex shrink value is higher, then the plug-in will shrink more than other items with lower values.
Flex Basis The value determines the initial size of the plug-in before the remaining area is distributed among the flex objects. Flex basis can be overridden by flex grow and flex shrink properties.

You can enter a value in pixels or percentage. auto indicates that the plug-in size is determined by its content or other layout properties.
Align Self An individual plug-in aligns itself in the following manner within a flex layout along the cross-axis, perpendicular to the main-axis defined by the flex-direction property.
  • auto: Inherits the alignment value of its parent container.
  • flex-start: Aligns itself at the start of the cross-axis.
  • flex-end: Aligns itself at the end of the cross-axis.
  • center: Aligns itself at the center of the cross-axis.
  • baseline: Aligns itself at the baseline of the cross-axis.
  • stretch: Stretches to fill the entire cross-axis.

Flex Row

Flex Row and Column

Flex Wrap

Resizing the Flexbox Layout

Set Background Image

To add a background image:
  1. Select the check box for Background Image.
  2. Select image Source Type from these options:.
    • File: Browse your local system and choose an image file to upload.
    • URL: Enter a URL address of the image you want to add as a background.
  3. The following settings allow you to control the appearance of the background image.
    Fit Determines how a background image is scaled to fit within its layout.
    • Auto: Displays the image at its original size.
    • Cover: Scales the image to cover the entire layout area while maintaining its aspect ratio. The image may get cropped.
    • Contain: Scales the image proportionally to fit within the layout area without the need for cropping.
    Repeat Determines if/how a background image should be repeated to fill the layout.
    • None: Image is not repeated. It is displayed only once covering the available area.
    • Repeat: Image is repeated both horizontally and vertically (grid-like pattern) to fill the layout area.
    • Repeat X: Image is repeated only horizontally along the x-axis.
    • Repeat Y: Image is repeated only vertically along the y-axis.
    • Space: Image is repeated only as much as possible without cropping, and the space between the repeats are distributed evenly.
    • Round: Image is repeated only as much as possible without cropping, and the repeats are resized to fill the available space.
    Horizontal Determines how a background image is positioned horizontally within its layout.
    • Left: Image is aligned to the left side.
    • Center: Image is horizontally centered.
    • Right: Image is aligned to the right side.
    Vertical
    • Top: Image is aligned to the top.
    • Center: Image is vertically centered.
    • Bottom: Image is aligned to the bottom.