You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.


The flex layout is a powerful layout, with many configuration options, based on the CSS Flexbox layout. The flex layout consists of a single series of adjacent components or containers, configured as either a column or a row. To this end, the layout has five properties:

  • direction controls whether the flex layout appears as a row or a column.
  • wrap controls what happens when the components are too big for the container. For instance, if the direction property is set to row, but the components in the row are too wide to fit in the flex container, this property controls whether a new row should be created, or scrollbars should be used.
  • justify controls where extra space is located when the components are not large enough to fill the container along the main axis. i.e. the space at the end or a row, or on the bottom of a column. If the components do not fully fill the space, the remaining gap can be placed at the beginning, the end, evenly on both sides, or evenly distributed between the components.
  • alignItems controls where extra space is located when the components are not large enough to fill the container along the alternative axis, i.e. the space below a row, or on the right of a column. If the components do not fully fill a row, the remaining gap can be placed above, below, evenly on both sides, or evenly distributed between the components. For a column it is left, right, both, or evenly distributed.
  • alignContent controls what happens to items that have been wrapped.

In addition, each component in a flex layout contains three properties:

  • basis controls the default size of a component along the flex container's direction. You can enter the value in pixels (e.g., 75px), as a percentage of the total length of the container (e.g., 50%), or you can use auto. All components configured to auto will equally share the available space in the container.
  • grow and shrink control the way that a component responds to changes in the flex container's width (for rows) or height (for columns). grow controls what happens when additional space is available, and shrink controls what happens when the component does not have enough space to fulfill its basis.

Grow and shrink are interpreted relative to other components in the Flex container, and are best understood through some simple principles:

  • A grow value of 0 will prevent the component from stretching beyond its basis. A shrink value of 0 will prevent the component from shrinking beneath its basis.
  • If all components in a row have the same (nonzero) grow value, they will all grow equally to accommodate more space. If they have the same shrink value, they will all shrink evenly.
  • Components with higher grow and shrink values will grow and shrink more. Specifically, a grow or shrink value is evaluated relative to the sum of all grow and shrink values in the container.

On this page ...

IULocgo

Flex Container



Growing and Shrinking

The flex container's grow and shrink properties allow a great deal of control over how different components expand and shrink. To demonstrate, here are three components nested inside a flex container, with a direction of row:

All three components have the same basis, so at this session width, they all have the same size. However, the blue component has a much larger grow value than the other two components. So, when we increase the length of the flex container along its direction property:

The blue component does most of the stretching. Specifically, since the sum of all grow properties is 1 + 1 + 5 = 7, and the blue component has a grow property of 5, for every 7 pixels the flex container grows, the blue component will grow by 5. Now let's try shrinking the container, noting that the red component has a shrink value of 5:

As you can see, a larger shrink value will make the container shrink more. For every 7 pixels the flex container loses, the red component will lose 5.

Static Widths

Now let's try the same example again, but with some different grow and shrink values:

We've given the red and green components identical values, so they should stretch and shrink at the same rate. Meanwhile, the blue component's grow and shrink values are both 0, so when we make the flex container wider, it stays the same size:

Even Scaling

Now let's say we start off with a blue component twice the basis of the others:

In order to maintain this ratio as the width of the container increases, it must have a grow value twice that of the others:


Position Properties

Position properties for a Flex container indicate whether the container is allowed to grow or shrink in relation to its siblings. For more information, see Perspective - Flex Container.

Position Property

Description

Data Type

growAbility to grow in 'direction' dimension as needed, relative to siblings. If space is available and grow is not zero, it may stretch, depending on sibling rules. This value is relative to other components, meaning that two components with the same grow value will grow at the same rate.value: numeric
shrinkAbility to shrink in 'direction' dimension as needed, relative to siblings. If space is available and grow is not zero, it may stretch, depending on sibling rules. This value is relative to other components, meaning that two components with the same shrink value will shrink at the same rate.value: numeric
basisSpace filled by component by default, before 'grow', 'shrink' and sibling considerations are evaluated. This is the component's base width when the direction property is set to 'row', and it is the component's base height when the direction property is set to 'column'.value: numeric
display

Determines if the component will be displayed in the container or not. Components that are not displayed won't just be invisible, but will actually be removed from the flex container, readjusting all other components to fit.

value: boolean

Root Properties

Root properties are accessed by selecting the root folder for a Perspective View on the Project Browser tree.


Root Property

Description

Data Type

directionDirection of the child layout. Options are row, row-reverse, column, column-reversevalue: string dropdown
wrap

Whether the container allows children to wrap to the next line if space has run out. Options are wrap, no-wrap, wrap-reverse.

value: string dropdown
justify

Adjusts placement of children along the main axis hen there is extra space, which may be used to fill areas before, after, or in-between. Options are flex-start, flex-end, center, space-between, space-around, or space evenly.

value: string dropdown
alignItemsAdjusts placement of children along the cross axis when there is extra space. Options are flex-start, flex-end, center, baseline, or stretch.value: string dropdown
alignContentAdjusts alignment of wrapped content when there is free space in the cross axis. Options are flex-start, flex-end, center, baseline, or stretch.value: string dropdown
styleSets a style for this view. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object


Configuring a Flex Layout

The Flex container is ideal when designing mobile responsive applications because it lets you set dynamic sizes to accommodate various screen sizes. By using the Flex container properties, it allows components to grow and shrink dynamically relative to each other. In the following examples, we'll use the Flex Container to create two types of views similar to the descriptions above:

  • a main view containing three components where only the bottom two stretch
  • a header view that has components pushed to both the left and right of the view with empty space between them


Grow and Shrink Properties

When the grow and shrink properties are set to non-zero numbers, they are allowed to change size. If they are set to zero, they are not allowed to grow or shrink, they will always match their basis value.

Creating a Main View

In this first example, we are going to configuring three Label components using a Flex container to demonstrate how to freeze the size of the first label and allow the second and third Labels to stretch to fill the remaining space. We can do this by setting the grow and shrink Position properties to a non zero number. The first Label component will not be allowed to grow or shrink because both properties are set to 0.

  1. Create a new view using the Flex container.

  2. The new view will open in the Designer. The Flex view will have some preset properties so you might want to look at the GUI and the PROPS in the Property Editor. These can be modified based on your design requirements.



  3. Using the square handles, set your view to 300px by 300px.

  4. With the root selected, drag three Label components onto the view from the Component Palette. Since the direction property is set to column, all three labels are placed in a column starting at the top of the view. The default Position property settings for all three Labels are:

    1. grow: 0 - the component can not grow
    2. shrink: 1 - allows the component to shrink
    3. basis: 32px - is the ideal size for the component



  5. We want the first label to be a static size and never change. Select the first Label and set the following properties:
    1. grow: 0
    2. shrink: 0
    3. basis: 100px

  6. Modify the component style for the Label component any way you want. We used the following settings:
    1. Click the Modify Style  icon next to the style property.
    2. Expand the Background category and set the Background color to Orange.
    3. Close the style popup and set the text property of the Label component to Orange Label.

  7. Select the second Label component and set the following properties:
    1. grow: 1
    2. shrink: 1
    3. basis: 100px

  8. Modify the component style for the Label component. We used the following settings:
    1. Click the Modify Style  icon next to the style property.
    2. Expand the Text category and set the color to White
    3. Expand the Background category and set the Backgroundcolor to Blue.
    4. Close the style popup and set the text property of the Label component to Blue Label.

  9. Select the third Label and set the following properties:
    1. grow: 1
    2. shrink: 1
    3. basis: 100px

  10. Modify the component style for the Label component. We used the following settings:
    1. Click the Modify Style  icon next to the style property.
    2. Expand the Background category and set the Background color to Green.
    3. Close the style popup and set the text property of the Label component to Green Label.

      Once all the Label Position properties are set, your view should look like the image below.



  11. Now, let's resize the components in the same direction as the container. Select the root container in the Project Browser. Using the square handle at the bottom of the view, drag the view down the length of your workspace. You'll notice that the Orange Label component didn't grow, and because the Blue and Green Label components were give the same grow values, they were stretched at the same rate.




  12. Select the root container in the Property Editor, and grab the square handle at the bottom and shrink your view. As the container gets smaller, the bottom two Labels will start to shrink. As you can see in the image below, because the Orange Label shrink property is set to zero, it didn't shrink.



You can use this example to modify the different Properties and Position properties to see how the behavior of the Label components change.  If you don't want them to shrink past their basis, change the shrink property to zero. 

Creating a Header View

In this example, we'll use the Flex Container to create a header view that contains several components pushed to the far left and right of the header. Then we'll show the header view on top of the Flex View (from the previous example) in a Perspective Session.

  1. Create a new view using a Flex container. 

  2. The new view will automatically open in the Designer. With the view selected, set the following size properties so it is wide and short:
    1. width: 600
    2. height: 60



  3. Select the root container in the Project Browser.

  4. In the Property Editor, set the direction property to row. Notice how the GUI at the top of the Property Editor also changed. You can use either the GUI or the PROPS to modify the containers properties.



  5. From the Component Palette, drag an Icon component and place it on the left side of the view.
  6. With the Icon selected, set the following Position properties:
    1. iconPath: material/menu
    2. grow: 0
    3. shrink: 0

    4. basis: 60px



  7. Next, add a Label component and set the following Position properties:
    1. text: My First Project
    2. grow: 1
    3. shrink: 1
    4. basis: 150px

    While we still have the Label selected, let's modify the text style:
    1. Click the Modify Styles  icon next to the style property and expand the Text category:
    2. Font Weight: Bold
    3. Text align: Center

  8. Add another Label, and set the following Position properties:
    1. text: Login
    2. grow: 0
    3. shrink: 0
    4. basis: 50x

    Let's modify the text style for the Label component.
    1. Click the Modify Styles  icon next to the style property and expand the Text category:
    2. Font Weight: Bold
    3. Text align: Right

  9. Add another Icon component to the container on the right and set the following Position properties:
    1. iconPath: material/person
    2. grow: 0
    3. shrink: 0

    4. basis: 60px

      Here's what your header view should like in the Designer after adding all the components and setting each component's property values.



  10. Save your project.

  11. Now let's show the header view on top of the Label page in a Perspective Session. Click on the Page Configuration  icon at the bottom of the Designer window.

  12. Select the /flex-view page. 
  13. In the Layout area, click on the Add for the top header section. Select the Top Header Flex view and click OK.  This will make the Top Header Flex View be displayed at the top of the Flex View we created.



  14. Right click on the Flex view page and select Launch Url.



  15. With your Perspective Session open, stretch and shrink your browser window horizontally and you'll see the Header grow and shrink with the icons locked in the corners.



    You can modify the different properties to change the behavior for the Label components on your browser.




  • No labels