Angular flex-layout:如何实现 Bootstrap 的 .container 行为?

Angular flex-layout : how to achieve Bootstrap's .container behavior?

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

Bootstrap 4的.container class如下:

.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 实现相同的行为?

您不能使用 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 中定义这个 "static not component dynamic" 尺寸。