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

如何使用纯Angular Flex-Layout API并且不使用任何CSS来实现相同的行为？

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>

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

说完这一切后，我仍然想定义这个＆＃34;静态而非组件动态＆＃34;在我的CSS中的大小。

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

1 个答案: