Flex layout is a package made for angular to use CSS flexbox features. The flex layout is used to display the elements within the flexbox container to be automatically arranged based on the parent container. Flex layout is used for building a layout structure. In this blog, we will be learning how to use the angular flex layout module and its features.
Installation
Install the flex layout package with npm/yarn in your angular project.
$ npm i @angular/flex-layout
And add FlexLayoutModule into your AppModule.
Flex Layout
Let’s get started with flex layout features and how to use them and their properties.
- fxFlex
The fxFlex should be used on the element within the flexbox container. The fxFlex is used to resize the element based on the parent container. The fxFlex supports two usage long-form and short-form.
- Long-form
- Short-form
The flex basis value can be percentages, pixels, em, vm, vh, calcs.
Example:
- fxLayout
The fxLayout is used to specify the direction of the elements inside the flexbox container. Shown below are the property values of fxLayout.
- row – Default value, the elements are displayed horizontally, as a row.
- row-reverse – Same as the row, but in reverse order.
- column – The elements are displayed vertically, as a column.
- column-reverse – Same as the column, but in reverse order.
- fxLayout + wrap – Specifies that the elements will wrap if necessary.
Note: when using the wrap, must first specify the layout direction.
Example:
- fxLayoutGap
The fxLayout is used to specify the margin gaps on elements within the flexbox container. Shown below are the default mode of fxLayout.
- margin-right is used when the flexbox container flex direction is a row.
- margin-bottom is used when the flexbox container flex direction is a column.
Note: The last child element will not have the margin gap only the inside gap are specified.
Example:
- fxLayoutAlign
The fxLayoutAlign is used to align the elements inside a flexbox container. Shown below are the property values of fxLayoutAlign.
- strat or flex-start – Default value, the elements are positioned at the beginning of the container.
- end or flex-end – The elements are positioned at the end of the container.
- center – The elements are positioned at the center of the container.
- space-around – The elements are positioned with space before, between and after the lines.
- space-between – The elements are positioned with space between the lines.
- space-evenly – The elements have equal space around them.
Example:
- fxFlexOffset
This should be used on the element within the flexbox container. This is used to specify the margin-left to the elements within the flexbox container.
Example:
- fxFlexOrder
This should be used on the element within the flexbox container. This is used to specify the order for the elements inside the flexbox container.
Example:
- fxFlexFill
The fxFlexFill is used to maximizes the height and the width of the elements inside the flexbox container.
Example:
- fxShow and fxHide
The fxShow and fxHide is used to show/hide the element based on the value passed to it.
Example:
Responsive Layouts
The responsive layouts are used to apply different layout styles for different viewport sizes and display devices. This can be used by combining breakpoints with fxLayout features. Some of the breakpoints are xs, sm, md, lg, xl for more reference responsive layouts.
Example:
Reference:
