This layout arranges items vertically down a container. This layout optionally divides available vertical space between panels containing a numeric flex property.

The “Flex” property defines the ratio that this content panel occupies relative to other content panels. For example, if you have two content panels with flex values of 1 and 2, the total value is 3 and the first panel occupies 1/3 of the space and the second – 2/3 of the space (where “space” means width for the horizontal layout and height for the Vertical Box layout).

Each content panel with a flex value will be flexed vertically according to each panel's relative flex value compared to the sum of all panels with a flex value specified. In the example below the fourth button has flex=3 while others have flex=1.

It is also possible to specify how the panels should be aligned and packed. In the example shown panels are centre-aligned.