The flex layout can be used with the `<tc:flexLayout/>` tag. The two most important attributes are `columns` and `rows`. If both attributes are set, only `rows` has an effect.

If no attributes set, the behavior of the flex layout is like a flow layout.

In this example, the `columns` attribute is set to '200px auto 1fr 2fr 10rem'. This means:

- Column 1: Width is always at 200px.
- Column 2: Width is always the width of the button.
- Column 3: The left space is filled with the remaining buttons in a ratio of 1:3 for this button.
- Column 4: The left space is filled with the remaining buttons in a ratio of 2:3 for this button.
- Column 5: Width is always set to 10rem.

The `rows` attribute is set to '100px auto 1fr 2fr 1fr'. Also, the height of the flex layout is '400px'. This means:

- Row 1: Height is always at 100px.
- Row 2: Height is always the height of the button.
- The left space is filled with the remaining buttons. The fourth button is twice the size than button three and five.

You can also put a flex layout within a flex layout. In this case the second row is another flex layout.