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:
See Flex Row, Flex Row and Column. |
Flex Wrap | By default, objects within the card are not wrapped.
See Flex Wrap. |
Justify Content | You can choose from these options to align objects along the main axis
(left to right):
|
Align Items | You can choose from these options to align objects along the cross axis
(top to bottom):
|
Layout Type | Choose from the following card layouts before starting to design your
pages:
|
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.
|
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:
|
Function | Layout functionalities:
|
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.
|
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. |
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.
|
Flex Row
![]() |
Flex Row and Column
![]() |
Flex Wrap
![]() |
Resizing the Flexbox Layout
![]() |
Set Background Image
- Select the check box for Background Image.
- 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.
- 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.