Flex container

A flex container is used as a container for a set of different components. The flex container component in UI Bakery 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.

Triggers

Triggers allow you to launch certain actions based on different events.

On Init

Calls for an action on component initialization

Fixed width

To define fixed width component, adhere to the following steps:

• Add Flex container component

• Add Button component

• Define the width of the Button component to 100px

You can configure fixed width and height of your child components inside of Flex container component

Flex grow

To add an image with fixed size and text, which should take the all free space on the right, adhere to the following steps:

• Add Flex container component

• Add Image and set fixed width and height

• Add Text

  • Set fixed width

  • Set Grow property to 1

  

Flex align right

To align components to the right select end in the Flex justify content property