我们可以在子元素中使用容器元素吗

Question

我是 angular 弹性布局的新手，我正在阅读文档并且我想知道是否允许在子元素内嵌套容器元素\在另一个容器元素内嵌套容器元素，例如：

在子元素中嵌套容器元素：

 <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>

将容器元素嵌套在另一个容器元素中：

<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

是的，行得通！

这里是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>

这里 First fxLayout="column" 将被视为根并在此根下，如果您添加 Second fxLayout="row" 则继承根组件，遵循First fxLayout="column"和fxLayoutAlign="space-evenly center"[的规则=23=]再往下看，逻辑和上面一样，继续下去，就看你有多深入了。

我们可以在子元素中使用容器元素吗

Can we use a container element inside child element

angular5

angular-material2

angular-flex-layout