带角度路由器插座的flex布局（flexbox）

Question

我试图将2个元素放在彼此旁边，其中一个占据屏幕的25％，另一个是占用容器其余部分的角度路由器插座。使用以下内容最终会在屏幕两侧放置两个元素，中间有空格。 **部分是有问题的部分

  <div class="container"
         fxLayout>
    <admin-route-menu fxFlex="25%" fxShow.lt-sm="false"></admin-route-menu>
    <router-outlet fxFlex></router-outlet>
  </div>

看起来像

左侧的admin-route-menu标签只是基本的html和css，其中html中有一个mat-list。路由器插座可以根据角度规格采用任何元件。如果这也有帮助，我可以包括admin-route-menu。

我也试过常规的弹性盒子，结果是一样的。

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .wrapper-left
{
  background: #fcc;
}
.wrapper > .wrapper-right
{
  background: #ccf;
  flex: 1;
}

感谢任何帮助，谢谢

Answer 1

对于有类似问题的人来说，问题通过

解决了

<div class="container"
         fxLayout>
    <div fxFlex="25%" fxShow.lt-sm="false">
      <admin-route-menu></admin-route-menu>
    </div>
    <div fxFlex>
      <router-outlet></router-outlet>
    </div>
  </div>

基本上总是使用带有角度flex布局模块的div，因为一些自定义元素不适合它，比如路由器插座

Answer 2

@dinamix提供的解决方案效果很好。因此，我将解释此问题的原因。

由于您将flex属性赋予router-out的明显原因，因此您遇到的问题是可预期的。因此路由器出口占据了所有剩余空间（此处为宽度）。

如果人们知道Angular不会用与该路线相对应的组件代替路由器出口，那么这种困惑应该消失。而是将组件附加到路由器出口旁边。

因此，通过将路由器出口包装在容器中并在其上设置flex，将使路由器出口保持不变，并且其兄弟姐妹（在您的示例中为Vendor形式）附加了angular的节点将可以看到flex效果。 / p>