行布局按列布局

Question

是角度柔性版式的新手，并尝试通过侧面的选择列表和中间的内容来构建一些内容。

它应该是这样的：

这是代码：

<div fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="10px">
  <div>
    <app-navbar></app-navbar>
  </div>
  <div style="border: 1px solid black" fxLayout="row">

    <!-- sidenav -->
    <div style="background-color: chartreuse">
      Sidenav
    </div>

    <!-- content -->
    <div style="background-color: chocolate">
      Content
    </div>
  </div>

</div>

这是它的外观：

Answer 1

除非您有不匹配的标记，否则您的代码应进行以下更改：将fxFlex值添加到子组件中，以使它们伸展出组件的整个宽度。

<div fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="10px">
<div>
  <h1>Header</h1>
</div>
<div style="border: 1px solid black" 
     fxLayout="row">

  <!-- sidenav -->
  <div style="background-color: chartreuse" fxFlex="50%">
    Sidenav
  </div>

  <!-- content -->
  <div style="background-color: chocolate" fxFlex="50%">
    Content
  </div>
</div>

可以在此处找到堆栈闪电战示例：https://angular-flex-layout-seed-yok6td.stackblitz.io

Answer 2

发现了问题...我在项目内部的一个模块中放了东西，并且该模块没有导入FlexLayoutModule。因此，添加此.. flex后，效果很好：-）