Flex Container
Platforms | Web and mobile apps |
Operating Systems | Android (7.7.2 version onwards) and iOS (7.7.2 version onwards) |
This component is a container that works as parent to include other components, which we refer to as children components. The Flex Container makes positioning and alignment easier because it supports auto-sizing in relation to its children components —meaning that its size can be adapted according to the size of its children— and allows you to distribute the remaining space among them.
For example, the screen below refers to a transaction error. This screen contains a parent flex container and an image, a text label and a button, with their respective secondary flex containers.
If, as per the client's request, the font size of the text in the text label is increased, the flex container will adapt so that the text is correctly displayed, as shown below.
In this case, it is necessary that the height (H) of the parent flex container and the secondary flex container that includes the text label be set in autosize, meaning that no height is defined. This will allow the parent flex to adapt to the size of its children and cause children components to distribute in the screen. In addition, the size of the secondary flex container will adapt according to the size of the text label, defined by its font size.
Important
By default, the first root component in the canvas is a panel, that acts as a container for any components within it and covers the entire screen. The panel allows you to use the Scroll and the Move over key attributes, applicable to the whole screen. As a best practice, you should add a flex container to the panel and then build the rest of the screen.
Screens layouts using flex containers
As a first step during the building process, the team designers identify the structure and features of the app based on the project requirements. This results in the app user flow, which allows the designers to set the navigation in the app. Based on that, the designers define the screens layouts, which are then created in Studio.
As a best practice, you should set layouts for the screens of your app. By setting a layout, you can define the organization of the different sections and components within each screen.
To begin with, you must add a flex container to the default panel in the canvas. Then, you will add additional flex containers per each section of the screen you are designing, that will include the different components. Therefore, every screen will have a unique parent flex container and additional secondary flex containers, that depend on the sections of the screen you are designing.
Tip
The definition of the layouts depends on the project's requirements and the information that each screen will contain.
For example, as per your client's request, you have to build a home screen for your app. After analyzing the requirements, you determine that the layout will contain four sections: a top bar, a content section with two subsections within it, and a navigation bottom bar (see image below). In addition to the parent flex container, each section will be designed based on a secondary flex container.
How to use a Flex Container component in your app
This section includes a use case that explains how you should use and configure a flex container component to fulfill a request made by Goldbank, your client.
Important
For each project, the designer of the team defines the layouts of the screens based on the client's requirements and universal guidelines of digital design. When defining such layouts, the designer sets the configurations of spacing, position and size attributes. Such information is then used by the builders when configuring the screens in Studio, as described in the use case below.
GoldBank asks you to redesign the My Accounts section of the app. This request involves adding a new screen, with the four accounts owned by the app users. The background of the screen must be the same accross the entire app, a specific shade of grey (#f2f2f2), but each account must be shown on a white background and have rounded corners. Each account must show the account name, number and balance. The list of accounts must appear on screen when the app user accesses My Accounts, and the size of the screen where the accounts are displayed must enlarge when the screen loads. Refer to the instructions below to learn more about how to configure the screen according to the client's requirements.
Once you get the project requirements, you can start working on the screen building process.
Click + New screen to open the screens editor.
Go to your app and, in the Overview, click Screens.
In the screens editor, go to the left panel and then go to the Info tab. Add a name to identify the screen, for example: My accounts, and a description including information about the purpose of the screen, for example: Screen that includes the accounts owned by the app user, that can be deleted as necessary. In addition, add the sequence. You can also add tags to easily find the screen in the screens list in the future, for example: accounts.
Click Save (diskette icon) to save the Info changes before editing the screen. The Commit message modal opens, where you have to enter a description informing why the screen was created or edited for the branch previously selected. You can also add the Jira ticket where the request was defined, if applicable. Then, click Save and continue.
As the best practice, you must add the parent flex container to the canvas and configure it. Within this flex container, you will add secondary flex containers that will represent the sections within the screen.
Go to the left panel and go to the Components tab. Type Flex Container in the search bar or find it in the list. Then, drag and drop it into the canvas to use it as a main flex to contain any other flex containers within it.
Go to the position and alignment section. Delete the values in the X and Y attributes. In the W and H attributes, enter 100 and select % (percentage) as unit of measurement, so that the flex container covers the entire screen (both in length and width).
Go to the Spacing section. In the Padding area, enter 40 in the top padding, 15 in the bottom padding, and 15 in the left and right paddings. Leave the px unit of measurement selected.
As required under the project's design, go to the Background section and enter a color for the flex container's background. In this case, enter #f2f2f2, which is the hexadecimal code that represents the shade of grey defined for the app according to the client's requirements.
Tip
As a best practice, enter the hexadecimal code for the color required instead of selecting a color from the color picker.
Go to the Size & Position section. In the Position type field, select Relative.
Tip
As a best practice, the parent flex container, secondary flex containers, and children components must have the Position Type defined in Relative. With the Relative positioning, children components are aligned one after the other according to the parent flex container layout (either in columns or rows). In addition, if the size of a child component is modified, relative positioning will allow all the children components to reorganize automatically, to avoid overlapping between them.
Go to the Layout section. In the Direction subsection, select Column, so that the components within the flex run from the top to the bottom of the container. In the Align subsection, select stretch, so that the components inside the flex container are aligned and stretch across the entire space of the container. In the Justify subsection, select start, so that the components within the flex are placed at the top part of the container. In the Children section, select Wrap so that, if the components within the flex container exceed its maximum width, they are placed below the rest of the components. Then, from the wrapping options that appear, select stretch.
Go to the Actions tab. In the Animation section, you have to configure the initial values of the flex container component and then the animation itself.
In the Alpha and Scale fields enter 0, to set the initial opacity and size of the flex container before the animation is executed, respectively.
Configure the On Load field so that the components that represent the accounts appear when the screen loads and the size of the flex container enlarges, as per the client's request. Click the vertical three-dot icon to the right. Once the Animations editor opens, enter a name to identify the animation, for example: On load animation to show accounts. Continue the configuration as specified below.
Tip
If the Scale value configured in the Animations section is 0, the scale of the component will be the size configured in the H and W fields in the Design tab.
Click add step to add a first step to the animation. To add an animation so that the flex container changes its size, you only have to set one step, which will be applied to the scale of the component. Go to the Basic section to the right, and configure the fields as specific in the table below.
Important
The Initial Values section has all the fields preconfigured, according to the values set in the X (Abs. Left), Y (Abs. Top) and R (Rotation) fields in the Design tab.
Name
Enter scale, so that the name shows that this step will set an animation on the size of the component.
Delay
Enter 1, so that the animation starts one second after the screen loads.
Duration
Enter 1, so that the animation lasts 1 second.
Repeat
No configuration is required because this attribute has not been implemented yet.
Curve
No configuration is required because this attribute has not been implemented yet.
Damping Ratio
Leave the default value (1) so that the animation does not have oscillation.
Position Type
Select Relative so that the component changes its position by adding or subtracting the values in the Abs Left and Abs Top parameters (Final Values section) to or from the initial position values.
Go to the Final Values section. Since the only purpose of this step is to show a change in the scale of the flex container, you only need to configure the Scale field. In the Scale field, enter 1, considering that: the initial value will be 0, as previously configured, and 1 represents that the final value of the flex container size will be the 100%, meaning the size specified in the W and H fields set in the Design tab. Click Save.
Configure the top bar of the screen (header section), starting with a secondary flex container.
Go to the left panel and add a second flex container, that will include the app page name and the access to the app user's profile. Change the name to FlexHeader.
Go to the position and alignment section. Enter 100 in the width (W) attribute and enter 5 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Border section and delete the number 1 that appears by default.
Go to the Layout section. In the Direction subsection, click Column. In the In the Align subsection, select center, In the Justify subsection, select center. In the Children section, select Wrap and then Start.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Configure the My accounts label that appears in the top section of the screen.
Go to the left panel and add a flex container, that will include the app page name and the access to the app user's profile. Change the name to Flex-data.
Go to the position and aligment section. Enter 80 in the width (W) attribute and enter 100 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Border section and delete the number 1 that appears by default.
Go to the Layout section. In the Direction subsection, click Row. In the In the Align subsection, select stretch. In the Justify subsection, select Start. In the Children section, select Wrap and then Start.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Go to the left panel. Type Text label and drag and drop it inside the flex container into the canvas.
Tip
Go to the Treeview tab to make sure that children components are correctly placed within each flex container.
Go to the position section. Enter 100 in the width (W) attribute and enter 100 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Basic section. In the CSS Class field, select SubtitleRegular. Then, go to the Value field and enter My accounts.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Go to the Text section. In the Font Size attribute enter 14px. In the Font Family field select InterBold. In the Font Weight section select bold and in the Color field enter the hexa code #505050.
Configure the icon that represents the app user's profile that appears in the top section of the screen.
Go to the left panel and add a flex container, that will include the app page name and the access to the app user's profile. Change the name to Flex-icon.
Go to the position and alignment section. Enter 20 in the width (W) attribute and enter 100 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Border section and delete the number 1 that appears by default.
Go to the Layout section. In the Direction subsection, click Row. In the In the Align subsection, select stretch. In the Justify subsection, select end. In the Children section, select Don't wrap .
Go to the Size & Position section. In the the Position Type attribute, select Relative.
Go to the left panel. Type Icon and drag and drop inside the flex container into the canvas.
Tip
Go to the Treeview tab to make sure that children components are correctly placed within each flex container.
Go to the position and alignment section. Enter 60 in the width (W) attribute and enter 60 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Basic section and then to the Icon attribute. Click the magnyfying glass icon and enter user in the search bar and click the glass icon. Click the first image that appears.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Go to the Text section. In the Color field, enter the hexa code #505050.
Set the layout of the screen section that displays the accounts cards information.
Go to the left panel and drag and drop a flex container. This will be the container tha represents the content section of the screen. Within it, you will then add the flex containers that will represent each account card. Change the name to FlexContent.
Go to the position section. Enter 100 in the width (W) attribute and enter 90 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Border section and delete the number 1 that appears by default.
Go to the Layout section. In the Direction subsection, click Column. In the In the Align subsection, select center. In the Justify subsection, select Start. In the Children section, select Wrap and then Start.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Configure the flex container that represents the account and the remaining flex containers within it, that represent the different sections within the account card. It will be divided in two main secondary flex containers: one with the account icon area, and another area with the account data (name, number and balance), and the icon to access the account details.
Tip
After you configure this flex container and the components within it, and therefore, set the first account, you have to duplicate it three more times for the remaining three accounts. Then, you will make the applicable changes regarding the data invoked by each account.
Go to the left panel and drag and drop a flex container. This will be the container tha represents the content section of the screen. Change the name to FlexCard1.
Go to the position and alignment section. Enter 100 in the width (W) attribute and enter 14 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Spacing section. In the Margin area, enter 12in the top margin. Leave the px unit of measurement selected.
In the Border section, delete the number 1 that appears by default.
In the Radius section, enter 8 in the Radius field and select px unit of measurement.
Go to the Layout section. In the Direction subsection, click Column. In the In the Align subsection, select center. In the Justify subsection, select center. In the Children section, select Wrap and then Start.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Configure the icon that represents the account.
Go to the left panel and add a flex container, that will include the app page name and the access to the app user's profile. Change the name to FlexImage.
Go to the position and alignment section. Enter 20 in the width (W) attribute and enter 100 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Background section. Leave the Flat option (radio button) selected so that the background has only one color. Open the color picker and enter the hexa code #c2c1c2 in the Hexa field.
Go to the Border section and delete the number 1 that appears by default.
Go to the Layout section. In the Direction subsection, click Row. In the In the Align subsection, select center. In the Justify subsection, select center. In the Children section, select Don't wrap .
Go to the Size & Position section. In the the Position Type attribute, select Relative.
Go to the left panel. Type Icon and drag and drop the icon component inside the flex container into the canvas.
Go to the position and alignment section. Enter 30 in the width (W) attribute and enter 30 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Basic section and then go to the Icon attribute. Click the magnyfying glass icon and enter creditcard in the search bar and click the glass icon. Click the first image that appears.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Go to the Text section. In the Color attribute, enter the hexa code #505050.
Configure the section that contains the account's name, number and balance, and the icon that represents the access to the account details.
Go to the left panel and add a flex container, that will include the account details. Change the name to FlexData2.
In the position section: enter 80 in the width (W) field and select the % unit of measurement; enter 100 in the height (H) field and select % as unit of measurement.
Go to the Spacing section. In the Padding area, enter 5 in the top, bottom, left and right paddings. Leave the px unit of measurement selected.
In the Border section, delete the number 1 that appears by default.
In the Layout section, you have to define several attributes. In the Direction subsection, click Row. In the In the Align subsection, select stretch. In the Justify subsection, select Start. In the Children section, select Wrap and then Start.
In the Size & Position section, go to the Position Type field and select Relative.
Go to the left panel and add a flex container into the Flex-data2 container. his component will contain the account name details. Change the name to Flex-name.
Go to the position and alignment section. Enter 85 in the width (W) attribute and enter 50 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Spacing section. In the Padding area, enter 5 in the top and left paddings. Leave the px unit of measurement selected.
Go to the Border section and delete the number 1 that appears by default.
Go to the Layout section. In the Direction subsection, click Row. In the In the Align subsection, select Start. In the Justify subsection, select Start. In the Children section, select Don't Wrap.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Go to the left panel. Type Text label and drag and drop it inside the flex container into the canvas.
Go to the position and alignment section. Enter 100 in the width (W) attribute and enter 100 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Basic section. In the CSS Class field select SubtitleRegular. In the Value field, enter the expression to invoke the account name information or enter the information you want to display. In this case: CA USD, to represent a current account in US Dollars.
Go to the Size & Position section. In the Position Type field, select Relative.
Go to the Text section. In the Font Size attribute enter 10px. In the Font Family field select InterBold. In the Font Weight section select bold and in the Color field enter the hexa code #505050.
Go to the left panel and add a flex container into the Flex-data2 container. This component will contain the account details access Change the name to FlexIcon.
Go to the position and alignment section. Enter 15 in the width (W) attribute and enter 50 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Spacing section. In the Padding area, enter 5 in the bottom padding. Leave the px unit of measurement selected.
Go to the Border section and delete the number 1 that appears by default.
Go to the Layout section. In the Direction subsection, click Row. In the In the Align subsection, select End. In the Justify subsection, select Start. In the Children section, select Don't Wrap.
Go to the Size & Position section. In the Position Type field, select Relative.
Go to the left panel. Type Icon and drag and drop it inside the flex container into the canvas.
Go to the position and alignment section. Enter 100 in the width (W) attribute and enter 100 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Basic section and then go to the Icon attribute. Click the magnyfying glass icon and enter arrowselect in the search bar and click the glass icon. Click the first image that appears.
Go to the Size & Position section. In the Position Type field, select Relative.
Go to the Text section. In the Color field enter the hexa code #666666.
Note
If you cannot visualize the icon in the canvas, use the QuickRun option to see how it will look like in the app.
Go to the left panel and add a flex container into the Flex-data2 container. This component will contain the account number data. Change the name to FlexNumber.
Go to the position and alignment section. Enter 50 in the width (W) attribute and enter 50 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Spacing section. In the Padding area, enter 5 in the top and left paddings. Leave the px unit of measurement selected.
Go to the Border section and delete the number 1 that appears by default.
Go to the Layout section. In the Direction subsection, click Row. In the In the Align subsection, select stretch. In the Justify subsection, select Start. In the Children section, select Don't Wrap.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Go to the left panel. Type Text label and drag and drop it inside the flex container into the canvas.
Go to the position and alignment section. Enter 100 in the width (W) attribute and enter 100 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Basic section. In the CSS Class field select Caption. In the Value field, enter the expression to invoke the account number information.
Note
The information displayed in this section is for description purposes only.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Go to the Text section. In the Font Size attribute enter 9px. In the Font Family field select InterMedium. In the Font Weight section select bold and in the Color field enter the hexa code #195ADA.
Go to the left panel and add a flex container into the Flex-data2 container. his component will contain the account balance details. Change the name to FlexBalance.
Go to the position section. Enter 50 in the width (W) attribute and enter 50 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Spacing section. In the Padding area, enter 5 in the top padding and 18 in the right padding. Leave the px unit of measurement selected.
Go to the Border section and delete the number 1 that appears by default.
Go to the Layout section. In the Direction subsection, click Row. In the In the Align subsection, select stretch. In the Justify subsection, select Start. In the Children section, select Don't Wrap.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Go to the left panel. Type Text label and drag and drop it inside the flex container into the canvas.
Go to the position and alignment section. Enter 100 in the width (W) attribute and enter 100 in the height (H) attribute. For both attributes, select % as unit of measurement.
Go to the Basic section. In the CSS Class field, select Label. In the Value field, enter the expression to invoke the account number information.
Note
The information displayed in this section is for description purposes only.
Go to the Size & Position section. In the Position Type attribute, select Relative.
Go to the Margins & Alignment section and select Right alignment.
Go to the Text section. In the Font Size attribute enter 8px. In the Font Family field select InterMedium. In the Font Weight section select bold and in the Color field enter the hexa code #202020.
Secondary flex containers
Secondary flex containers are flex containers added within a parent flex container that, due to the characteristic as secondary, have additional attributes available for configuration in the Design and Advanced tabs of the right panel. Refer to the table below to learn more about the additional attributes.
Important
The mentioned additional attributes only appear for configuration for secondary or children flex containers.
Attributes Specifications
Refer to the section below to learn more about all the right panel attributes that appear for configuration when you drag and drop a flex container component into the canvas.
Important
This section is for information purposes only. Configure the attributes for the component according to your project's requirements.
Flex Container Right Panel Configuration
Attributes
Design tab
Note
In the case of the flex container component, alignment attributes cannot be configured.
First of all, you must change the name of the flex container to represent its position within the screen layout. For example, if it is a parent flex container, the name can be FlxParent.
Then, you can configure the position attributes, which affect the position of all the children components within it, as specified in the table below.
X | Position of the flex container in the canvas with regard to the x axis. Enter a number in the field and then select the % or px unit of measurement. TipIn the case of a parent flex container, the X attribute must be set in 0. |
Y | Position of the flex container in the canvas with regard to the x axis. Enter a number in the field and then select the % or px unit of measurement. TipIn the case of a parent flex container, the Y attribute must be set in 0. |
R | Angle with the vertical axis in which the flex container is positioned. This attribute should not be configured for the flex container component. |
W | Width of the component with regard to the screen size. |
H | Height of the component with regard to the screen size. |
Flat | Click the Flat radio button to set a single color for the component's background. To set the color, click the field and type a hexa code or click the rounded-edges square icon to open the color picker. In the color picker, enter the hexa color code. You can also set the opacity percentage outside the color picker in the Opacity field. If you previously selected a color in the color picker, the opacity is set in 100 by default. If no color was selected, this field is empty. To modify it, click the field and enter the desired percentage. TipAs a best practice, if a color is already defined, the opacity field should not be modified. |
Gradient | Click the Gradient radio button to set a color gradient for the component's background. Click each of the rounded-edges square icons to open the color picker. In the color picker, enter the hexa color code in the Hexa field. Click |
Background Image | Click the Image checkbox to add an image to the component's background. You can use a background image with both the Flat and Gradient background options. Click the Background image field and type the name of the background image, or click the upload icon to open the image picker. Select one of the images from the list or use the search bar to find an image by name. |
Note
If you select the Flat background, you cannot choose the Gradient background and vice versa. The Background Image option is available in both cases.
Direction | Direction of the components within the flex container. Click Row so that children components are organized in rows or click Column so that children components are organized in columns. You can also click the two-way arrows icon ( NoteThe Alignment and Justify options change depending on the Direction selected. |
Align | Alignment of the components within the flex container with regard to the container's space. If you selected Row in the Direction section, click an option to define the alignment of the components considering them as in a row. If you selected Column in the Direction section, click an option to define the alignment of the components considering them as in a column. The options available are: Start, center, End, stretch, baseline. |
Justify | Justification of the components within the flex container with regard to the container's space. The options available are: Start, center, End, Space Between, Space Around. |
Children | Organization of components when the maximum width of the flex container is reached. Click Don't Wrap so that components exceeding the maximum width of the container are not placed below the rest of the components, or click Wrap so that components exceeding the maximum width of the container are placed below the rest of the components. Then, select one of the wrapping options so that the components are organized according to a specific area of the flex container. The options available are: Start, center, End, stretch, Space Between or Space Around. You can also click the two-way arrows icon ( |
