Flexbox Card

This layout offers a flexible and responsive design structure.

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.
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.
Show/Hide Select +Add Conditions to create conditions to show or hide the card.

Flex Row

Flex Row and Column

Flex Wrap

Resizing the Flexbox Layout