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

Question

I'm new to Angular Flex-layout API, and I have a basic question :

Bootstrap 4's .container class is as follows :

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

How can I achieve the same behavior with pure Angular Flex-Layout API and without using any CSS ?

Answer 1

You can't do exactly the same using the standard breakpoints from flex-layout because they are different ones. See https://github.com/angular/flex-layout/wiki/Responsive-API.

However, you can use responsive API with modifiers to specify different max width of container. Something like:

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

You can also implement your own breakpoints as you needed.

Having said all this I still like to define this "static not component dynamic" sizes in my css.