angular-flex-layout - Angular flex-layout：如何实现 Bootstrap 的 .container 行为？

Question

我是 Angular Flex-layout API 的新手，我有一个基本问题：

Bootstrap 4 的 .container 类如下：

.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

如何在不使用任何 CSS 的情况下使用纯 Angular Flex-Layout API 实现相同的行为？

Answer 1

你不能使用 flex-layout 中的标准断点做完全相同的事情，因为它们是不同的。请参阅https://github.com/angular/flex-layout/wiki/Responsive-API。

但是，您可以使用带有修饰符的响应式 API 来指定不同的容器最大宽度。就像是：

  <div class="content" 
       fxFlex.gt-xs="500px"
       fxFlex.gt-sm="800px"
       fxFlex.gt-md="1000px"
       fxFlex.gt-lg="1140px">  
  </div>

您还可以根据需要实现自己的断点。

说了这么多，我仍然喜欢在我的 css 中定义这种“静态而非组件动态”大小。