An alternative library to Angular's deprecated [angular-flex-layout](https://github.com/angular/flex-layout) library. `ri-flex-layout` helps you achieve responsive layouts in Angular applications with minimal code changes.
npm install ri-flex-layoutAn alternative library to Angular's deprecated angular-flex-layout library. ri-flex-layout helps you achieve responsive layouts in Angular applications with minimal code changes.
!License: MIT
!npm version
!npm downloads
---
| Angular Version | ri-flex-layout Version |
|---------------------|:----------------------:|
| >= 21.0.6 | v1.5x |
| >= 20.3.15 | v1.4x |
| >= 19.2.13 | v1.3.x |
| >= 16.0.0 < 17.0.0 | v1.2.2 |
| >= 14.2.0 | v1.1.1 |
| >= 12.0.0 | v1.1.0 |
---
- Drop-in replacement for angular-flex-layout
- Fully responsive with breakpoint support
- Works seamlessly with Angular CDK
- Simple API: riFxLayout, riFxFlex, riFxLayoutAlign, and more
- Supports ng add for quick setup
---
Install the necessary packages:
``bash`
ng add @angular/cdk
npm install ri-flex-layout
Import RiFlexLayoutModule in your root module (AppModule):
`ts
import { NgModule } from '@angular/core';
import { RiFlexLayoutModule } from 'ri-flex-layout';
@NgModule({
declarations: [...],
imports: [
...,
RiFlexLayoutModule
],
bootstrap: [...]
})
export class AppModule { }
`
---
Start using layout directives in your templates:
`html`
Sample div
Test div
`html`
Column 1
Column 2
`html
riFxLayout="row wrap"
riFxLayout.xs="column"
riFxLayoutAlign="space-between"
riFxLayoutGap="10px"
riFxLayoutGap.xs="10px"
>
Sample Div 1
Sample Div 2
Sample Div 3
---
Try it on StackBlitz (Coming Soon) 🚀
---
This project is licensed under the MIT License. See the LICENSE file for more details.