Flex Layout

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

Button Another Button 3rd Button Some Button Any Button

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.

200px auto 1fr 2fr 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.

Button Button Button Button Button

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

Button Button Button Button Button Button Button Button