0

私は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 を使用せずに同じ動作を実現するにはどうすればよいですか?

4

1 に答える 1

4

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でこの「コンポーネント動的ではなく静的」サイズを定義したいと思います。

于 2017-10-12T19:40:22.730 に答える