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
string
Component name
value
value
Current component value
children
children
The children of the card
valid
boolean
Indicates if the card is valid
Methods
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
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 componentsConfigure 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.
Last updated
Was this helpful?