Flex Layout

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

ButtonAnother Button3rd ButtonSome ButtonAny 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.

200pxauto1fr2fr10rem

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.

ButtonButtonButtonButtonButton

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

ButtonButtonButtonButtonButtonButtonButtonButton