What makes Flex-Layout easier to work with than FlexBox CSS is the fact that it has APIs that abstract the CSS away for us. We still need CSS (remember, browsers only understand HTML, JavaScript, and CSS), but what I mean by the face that CSS will be abstracted away for us is that when our application is transpiled, Angular Flex-Layout will inject the CSS for us. As I've mentioned, Flex-Layout doesn't even have a CSS style sheet, and we don't have to write any CSS.
The following is a table of the Flex-Layout APIs, detailing what they are used for, together with a quick syntactical example:
| Type | API | Used for |
Example |
| Static (for container) |
fxLayout | Defines the direction of the flow (that is, flex-direction). |
<div fxLayout="row" fxLayout.xs="column"> |
| Static (for container) |
fxLayoutAlign | Defines the alignment of the elements. |
<div fxLayoutAlign="start stretch"> |
| Static (for container) |
fxLayoutWrap | Defines whether the elements should wrap. |
<div fxLayoutWrap> |
| Static (for container) |
fxLayoutGap | Sets the spacing between elements. |
<div fxLayoutGap="15px"> |
| Static (for children) |
fxFlex | Specifies resizing of the host element within its container flow layout. |
<div fxFlex="1 2 calc(15em + 20px)"> |
| Static (for children) |
fxFlexOrder | Defines the order of a FlexBox item. |
<div fxFlexOrder="2"> |
| Static (for children) |
fxFlexOffset | Offsets a FlexBox item within its container flow layout. |
<div fxFlexOffset="20px"> |
| Static (for children) |
fxFlexAlign | Similar to fxLayoutAlign, but for a specific FlexBox item (not all). |
<div fxFlexAlign="center"> |
| Static (for children) |
fxFlexFill | Maximizes dimensions of the element to that of its parent container. | <div fxFlexFill> </div> |
These APIs have options, and defaults. For instance, the fxLayout API defaults to row, but also has column, as well as row-reverse, and column-reverse.
Also, the .xs in the example for the fxLayout API has a similar notion as the Bootstrap grid in that it provides a way to allow for different viewport sizes. So, in the first example in the preceding table, the layout for regular viewports will be that elements flow from left to right within the row, and, for small viewports, the elements will be stacked in a single column.
Another interesting thing to point out in the examples in the preceding table is where there is a calculation made in the fxFlex API. This is a little like what we looked at in the SASS crash course in Chapter 3, Bootstrap – Grid Layout and Components, although SASS was compiled by Ruby, whereas Flex-Layout is compiled by TypeScript.
I won't enumerate all the options here because you didn't purchase this book to read documentation, any more than I wrote this book to just copy documentation. Of course, I will point you to the place to look up the documentation for Flex-Layout. You can find it at their official website: https://github.com/angular/flex-layout/wiki/API-Documentation.
Fortunately, the Flex-Layout team has done a fantastic job with the documentation. Their wiki also includes several live layout demos that you can take a look at. Here is the direct link: https://tburleson-layouts-demos.firebaseapp.com/#/docs.