IntegrationsInstallationAdministrationContact Support
Search…
V4.1.13
What is XMPro?
Getting Started
Browser Requirements
Free Trial
End-To-End Use Case
What's New
Icon Library
Concepts
Data Stream
Application
Landing Pages
Recommendation
Connector
Collection and Stream Host
Agent
Version
Manage Access
Category
Variable
How-To Guides
Data Streams
Application
Manage Apps
Manage Templates
Manage Pages
Import an App Page
Design Pages for Mobile
Navigate Between Pages
Pass Parameters Between Pages
Page Data
Manage Connections
Check Connector Logs
Manage Data Sources
Use Data Sources in the Page
Use Dynamic Properties
Use Expression Properties
Use Page Layers
Use Style Manager and Devices
Use Flex
Use Validation
Use Variables & Expressions
Create and Maintain Notes
Manage Widgets
Manage App Files
Manage Themes
Recommendations
Manage Connectors
Stream Host
Manage Agents
Manage Versions
Manage Access
Manage Categories
Manage Variables
Import, Export, and Clone
Publish
Manage Site Settings
Manage Landing Pages
Blocks
Common Properties
Layout
Basic
Actions
Recommendations
Visualizations
Widgets
Administration
Administrative Accounts
Companies
Subscriptions
Users
Integrations
Platform Security
Installation
1. Before we start
2. Deployment
3. Complete Installation
4. Additional Configuration
Release Notes
v4.1.13
v4.1.0
v4.0.0
Powered By GitBook
Use Flex
Flex styles are a way of changing the layout of the page so it is responsive. When using Flex, the layout and position of the Blocks will respond to fit the screen, which is important in ensuring that users have a good user experience regardless of the screen size they are viewing your Application on.
It is recommended that you read the article listed below to improve your understanding of Devices and the Style Manager.

Enabling Flex Styles

To enable Flex styles, follow the steps below:
  1. 1.
    Select the parent Block of the Blocks you want to configure the position for.
  2. 2.
    Click on Block Styling.
  3. 3.
    Choose Flex for the display or enable the flex container.

Flex Container

Direction

The direction determines which direction the content will go. It can either be:
  1. 1.
    Row - Left to right
  2. 2.
    Reverse row - right to left
  3. 3.
    Column – Top to Bottom
  4. 4.
    Reverse column – Bottom to Top

Justify

Justify determines the way the contents are laid out. It can either be:
  1. 1.
    Start
  2. 2.
    End
  3. 3.
    Space Between (puts spaces between the Blocks)
  4. 4.
    Space Around (puts an equal amount of space around each Block)
  5. 5.
    Center

Align-Items

Determines the vertical alignment of the Blocks. It can either be:
  1. 1.
    Start
  2. 2.
    End
  3. 3.
    Stretch
  4. 4.
    Center

Blocks inside the Flex Container

Grow

Grow will grow the item to fit the container.
If multiple Blocks have a grow value greater than 0, they will take up a ratio of the available space.

Shrink

Shrink determines whether an item is allowed to shrink if the screen is too small or if other Blocks take up too much space. Shrink will not work if the Block has a minimum width or height.

Basis

This determines the default size of the object along its direction axis.

Order

The order will change the order of the Blocks. Blocks with no order will be displayed first, followed by the ordered Blocks going in ascending order.

Align-Item

Aligns the individual Blocks. They can either be:
  1. 1.
    Start
  2. 2.
    End
  3. 3.
    Stretch
  4. 4.
    Center

Further Reading

Previous
Use Style Manager and Devices
Next
Use Validation
Last modified 2mo ago
Export as PDF
Copy link
On this page
Enabling Flex Styles
Flex Container
Direction
Justify
Align-Items
Blocks inside the Flex Container
Grow
Shrink
Basis
Order
Align-Item
Further Reading