Can we use a container element inside child element - angular5

Question

I'm new to angular flex layout, I was reading the documentation and
I wanted to know if nesting container elements inside children element \ nesting container elements inside another container element is allowed, For example:
nesting container elements inside children elements:
<div fxLayout="column">
<div fxFlex="100%"> column item A </div>
<div fxFlex="100%"> column item B
<div fxLayout="row">
<div fxFlex="100%">row item A </div>
<div fxFlex="100%">row item B </div>
</div>
</div>
</div>
nesting container elements inside another container elements:
<div fxLayout="column">
<div fxFlex="100%"> column item A </div>
<div fxFlex="100%"> column item B </div>
<div fxLayout="row">
<div fxFlex="100%">row item A </div>
<div fxFlex="100%">row item B </div>
</div>
</div>

Answer 1

Yes, that's working!.
Here is the Online Demo
<div fxLayout="column" fxLayoutAlign="space-evenly center">
<div>This is Column A</div>
<div>This is Column B</div>
<div>This is Column C</div>
<div fxLayout="row" fxLayoutAlign="space-evenly center">
<div >This is Row item A under Column </div>
<div>This is Row item B under Column</div>
<div fxLayout="column" fxLayoutAlign="space-evenly center">
<div>This is Column A under Row</div>
<div>This is Column B under Row</div>
</div>
</div>
</div>
Here First fxLayout="column" will be treated as root and under this root, if you add Second fxLayout="row" then it will be inherited the root component and follow the rule of First fxLayout="column" with fxLayoutAlign="space-evenly center" and further you go down the logic will be same as above and its continue, how much you deep dig into it.