@angular/flex-layout

What is @angular/flex-layout?

@angular/flex-layout is a powerful layout library for Angular that provides a sophisticated API using Flexbox CSS and mediaQuery. It allows developers to create responsive and adaptive layouts with ease.

What are @angular/flex-layout's main functionalities?

Responsive Layouts

This feature allows you to create responsive layouts that adapt to different screen sizes. The example shows a row layout that changes to a column layout on extra-small screens.

<div fxLayout="row" fxLayout.xs="column">
  <div fxFlex>Item 1</div>
  <div fxFlex>Item 2</div>
  <div fxFlex>Item 3</div>
</div>

Grid Layouts

This feature allows you to create grid layouts with flexible spacing and alignment. The example shows a row layout with items taking 25%, 50%, and 25% of the available space, respectively.

<div fxLayout="row" fxLayoutGap="10px">
  <div fxFlex="25">Item 1</div>
  <div fxFlex="50">Item 2</div>
  <div fxFlex="25">Item 3</div>
</div>

Alignment and Justification

This feature allows you to align and justify content within a layout. The example shows a row layout with content centered both horizontally and vertically.

<div fxLayout="row" fxLayoutAlign="center center">
  <div fxFlex>Centered Item</div>
</div>

Show/Hide Elements

This feature allows you to conditionally show or hide elements based on screen size. The example shows text that is hidden on screens larger than small.

<div fxShow fxHide.gt-sm>
  This text is hidden on screens larger than small.
</div>

Other packages similar to @angular/flex-layout

ngx-flexible-layout

ngx-flexible-layout is another Angular library that provides a flexible layout system using CSS Flexbox. It offers similar functionalities to @angular/flex-layout but with a different API and potentially fewer features.

README

Angular Flex-Layout

The sources for this package are in the main Angular Flex-Layout repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

12.0.0-beta.35 (2021-09-15)

Allow usage of RxJS v7 with the v12 release.

<a name="12.0.0-beta.34"></a>