Basic vertical layout with header

This is an example of a common responsive vertical layout.

• Container has direction: column by default, so its children show one on top of the other. In this case, main direction is Y, and cross-axis direction is X. There are properties for each axis, which depend on the direction. For example alignItems applies to cross-axis direction.
• The width of MainHeader and MainContent is the width of the container, because alignItems property, which applies to cross-axis direction, is set to stretch by default.
• MainHeader has a defined height
• MainContent height is not explicitly defined. It can be:
• By default, it will adapt to the content. If there is no content, the height will be zero.
• If we set grow: 1, it will expand to fill the container.