ri-flex-layout/README.md

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.

# RiFlexLayout

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.

![License: MIT](https://img.shields.io/badge/license-MITLicense-brightorange)
![npm version](https://img.shields.io/npm/v/ri-flex-layout)
![npm downloads](https://img.shields.io/npm/dw/ri-flex-layout)

---

## Versions Compatibility

| Angular Version     | ri-flex-layout Version |
|---------------------|:----------------------:|
| >= 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:

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

### Import the Module

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:

### Row Layout Example

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

### Column Layout Example

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

### Responsive Layout Example

```html
<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](https://stackblitz.com/) (Coming Soon) 🚀

---

## License

This project is licensed under the **MIT License**. See the [LICENSE](./LICENSE) file for more details.