concept Flex Layout in category angular

This is an excerpt from Manning's book Angular Development with Typescript, Second Edition. Login to get full access to this book.

There are two types of directives in the Flex Layout library: one for containers and one for their child elements. A container’s directives are used to align its children. Child directives are applied to child elements of a container managed by Flex Layout. With child directives, you can specify the order of each child, the amount of space it takes, and some other properties, as shown in table 7.1.

Table 7.1. Frequently used Flex Layout directives

Directive	Description
Container directives
fxLayout	Instructs the element to use CSS Flexbox for laying out child elements.
fxLayoutAlign	Aligns child elements in a particular way (to the left, to the bottom, evenly distribute, and so on). Allowed values depend on the fxLayout value attached to the same container element—see Angular Flex Layout documentation.
fxLayoutGap	Controls space between child elements.
Child directives
fxFlex	Controls the amount of space a child element takes within the parent container.
fxFlexAlign	Allows selectively changing a child’s alignment within the parent container prescribed by the fxLayoutAlign directive.
fxFlexOrder	Allows changing the order of a child element within the parent container. For example, it can be used to move an important component to the visible area when switching from desktop to a mobile screen.