Can we use a container element inside child element

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.