Hello Everyone,

Zoho announced the launch of Flex, a brand-new component for Canvas in Zoho CRM! Flex gives you enhanced control over how your data is presented in your layouts. This component makes it easy to create responsive designs that adjust seamlessly across different devices and screen sizes, offering a better experience for all users.

What can you achieve with Flex?  

Adding a Flex component to your layout helps you build highly customizable, adaptive designs, boosting both the visualization of your data and user engagement.

With Flex, your Canvas layout will always look polished—regardless of the screen size.

Use the Flex component when you need layouts that are:

• Responsive: Easily adapts to any device size or orientation.

• Flexible: Items can grow, shrink, or align dynamically as needed.

• Centered: Align elements perfectly in the center, either vertically or horizontally.

• Evenly Spaced: Distribute elements evenly within the component for a clean, organized look.

• Row or Column-based: Arrange elements effortlessly in rows or columns.

Take a look below to see how a record appears when using a Canvas layout designed with Flex components—it automatically adjusts as information is updated.

Types of Flex Components  

There are three Flex types you can choose from, depending on how you want to organize your Canvas layout:

• Vertical Flex
  Arrange items vertically (one below another) within the component. Perfect for layouts like business cards, user profiles, or product details.

• Horizontal Flex
  Place items horizontally (side-by-side) in the component. Ideal for comparisons such as sales reports, KPIs, or timeline views.

• Wrap Flex
  Allow items to wrap onto the next line when they exceed the available space. Best suited for dense layouts like product grids or event calendars.

How does Flex enable responsive design?  

Flex introduces several powerful features that automatically adapt your layouts for a smooth user experience:

• Auto Responsive
  Items automatically rearrange or stretch depending on the component's size while maintaining a consistent minimum width, without the need for manual tweaking.

• Auto Column
  Items are organized into multiple rows based on the number of columns you set, ensuring there’s no overlap or clutter.

• Minimum and Maximum Width Settings
  Define how wide or narrow items can become, making sure critical information remains clear and accessible.

Note: You cannot enable both Auto Responsive and Auto Column at the same time. Selecting one will automatically deactivate the other.

Advanced Flex Tools for Greater Customization  

Flex also brings a suite of advanced options to fine-tune your layout even further:

• Flex Item Alignment: Precisely control how each item aligns within the flex container.

• Flex Item Gaps: Maintain consistent spacing between items for a balanced, neat appearance.

• Flex Item Hug: Let elements dynamically shrink or expand based on the size of their content.

• Child Flex Items: Manage the behavior of nested elements within a Flex component for better layout control.

• Fill Width: Stretch elements to cover the entire width of the vertical Flex container for a full, unified look.

• Convert to Flex: Quickly group multiple elements into a Flex container to save time and effort.

• Replace with Section / Replace with Flex: Seamlessly switch between a section and a Flex component (and vice versa) directly within the Canvas builder—no layout disruption required.

This new addition gives you the power to craft intuitive, attractive layouts tailored to your customer needs. Dive into Flex today and upgrade your Canvas building experience!

You can get more info from pfc-group.com.