RiFlexLayout

An 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

---

Versions Compatibility

| 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 |

---

Features

- 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

---

Getting Started

$3

Install the necessary packages:

``bash
ng add @angular/cdk
npm install ri-flex-layout
`

$3

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 { }
`

---

Usage

Start using layout directives in your templates:

$3

`html


`html


`html


---

Live Demo

Try it on StackBlitz (Coming Soon) 🚀

---

License

This project is licensed under the MIT License. See the LICENSE file for more details.