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.

Versions Compatibility

| Angular Version | ri-flex-layout Version | |---------------------|:----------------------:| | >= 21.2.0 | v1.6x | | >= 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

Installation

Install the necessary packages:

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

Import the Module

Import RiFlexLayoutModule in your root module (AppModule):

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:

Row Layout Example

<div riFxLayout="row" riFxLayoutAlign="space-between center" riFxLayoutGap="10px">
  <div riFxFlex="40">Sample div</div>
  <div riFxFlex>Test div</div>
</div>

Column Layout Example

<div riFxLayout="column" riFxLayoutAlign="space-around center" riFxLayoutGap="10px">
  <div riFxFlex="50">Column 1</div>
  <div riFxFlex>Column 2</div>
</div>

Responsive Layout Example

<div 
  riFxLayout="row wrap"
  riFxLayout.xs="column"
  riFxLayoutAlign="space-between"
  riFxLayoutGap="10px"
  riFxLayoutGap.xs="10px"
>
  <div riFxFlex="33" riFxFlex.xs="100">Sample Div 1</div>
  <div riFxFlex="33" riFxFlex.xs="100">Sample Div 2</div>
  <div riFxFlex="33" riFxFlex.xs="100">Sample Div 3</div>
</div>

Live Demo

Try it on StackBlitz (Coming Soon) 🚀

License

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