We covered why the best option for us from the four for laying out our components is FlexBox CSS, but this is a chapter on Flex-Layout, and so I now need to introduce it to you. So let's do that now, and then I'll list a few reasons why you should consider using it instead of using FlexBox CSS directly (again since Flex-Layout is built on top of FlexBox CSS).

Flex-Layout's home can be found here: https://www.github.com/angular/flex-layout.

Here are a few bullet points detailing what Flex-Layout is:

• It's a standalone library.
• It's Angular-native (and is a TypeScript implementation).
• It's integrated with the CLI.
• It has static APIs, which are for the containers, and other static APIs, which are for the container children. These APIs have the following characteristics: 
  • They are declarative
  • They support data binding and change detection
  • They are directives used in HTML
• There's no CSS for us to write since it's dynamically injected for us

Some advantages of using it instead of FlexBox CSS, and following from the preceding bullet points, are as follows:

• You don't have to be a CSS expert (in fact, as you'll soon see, we won't even be using a CSS style sheet) 
• It fits Angular perfectly (in fact, it's Angular-native)
• There are APIs which helps developers in faster application development

Another nice thing to know is that since Flex-Layout is a standalone (that is, self-contained) library, it can be used with or without Angular Material. We'll be taking a look at Angular Material in Chapter 9, Working with Angular Material, where we'll be utilizing a couple of its components. Again, these components can be used as replacements for, or in conjunction with, ng-Bootstrap. We'll be taking a look at ng-Bootstrap in Chapter 8, Working with NG Bootstrap.

I've mentioned in the preceding bullet list that Flex-Layout has static APIs. What I have not mentioned is that it also has responsive APIs. We'll be covering Flex-Layout's static APIs in an upcoming section, The Flex-Layout API, but I leave the reading of its responsive API to you (I have included links to the Flex-Layout documentation at the end of that section).

However, I would like to say a quick word on responsive APIs. Responsive APIs are there so that you can create an adaptive UX (that is, an adaptive user experience to have a slightly different layout for various viewport sizes). In order to do that, you need to also leverage MediaQueries—not only FlexBox CSS. Now, yes, this is a chapter on Flex-Layout, so why am I mentioning that you need to leverage MediaQueries in conjunction with FlexBox CSS? I mention this to point out the fact that the Flex-Layout team has us covered in this space (that is, responsive UX, not just layout) as well. And they have done this by providing extensions to the static APIs to abstract the MediaQueries away from us. This means that we don't have to handcraft tedious rule sets—and since they created extensions on the static APIs, we can leverage what we learn there and apply the extensions to create the adaptive UX right in our HTML. It's really quite brilliant!