Flex Container

Overview

A flex container is used as a container for a set of different components. The component utilizes CSS Flexbox to manage the layout of child elements. Flexbox provides advanced layout capabilities that are crucial for handling dynamic content and ensuring layouts adapt appropriately across different screen sizes.

Properties

Name	Type	Description
name	string	Component name
value	value	Current component value
children	children	The children of the card
valid	boolean	Indicates if the card is valid

Methods

Name	Parameters	Returns	Description
setValue	data: object	void	Set component data
resetValue	–	void	Reset component to the initial value
validate	–	void	Trigger form validation
resetValidation	–	void	Clear validation errors

Triggers

Name	Description
On Init	Triggered when the component is initialized

Working with the component

The Flex Container allows you to:

• Define the width and height of child components inside the container. The following options are available: pixels, percent, and auto.

It's also possible to configure 100% height of components inside the Flex Container. See this article for more details👇

100% height components

• Configure one child component to occupy all free space on one side - the other component has a set width. In this case, you can use the child component's Grow property and set it to 1.

• Configure content and items alignment inside the container using the Flex justify/align settings.