FlexboxLayout is a non-conforming implementation of the CSS flexible box layout and is based on an existing Apache 2 licensed flexbox implementation:

<FlexboxLayout width="300" height="200" flexDirection="column" 
 flexWrap="wrap">
 <Label text="Label 1" width="70" height="70" 
  backgroundColor="red"></Label>
 <Label text="Label 2" width="70" height="70" 
  backgroundColor="green"></Label>
 <Label text="Label 3" width="70" height="70" 
  backgroundColor="blue"></Label>
 <Label text="Label 4" width="70" height="70" 
  backgroundColor="yellow"></Label>
</FlexboxLayout>

In the preceding example, FlexLayout has a height of 200 pixels, but the children need 280 pixels to be stacked vertically. The preceding code will produce the following layout:

In the preceding example, we have a FlexboxLayout with four labels, each of which are 70 pixels in terms of width and height. The flexWrap property wraps the children and adds a new row or column as needed. The flexDirection property stacks the children either row-wise or column-wise.

Now that we have understood the different layouts that are available in NativeScript, we will implement some of them by creating a new Angular app.