RiFlexLayout

This is alternative library for Angular Flex layout .

Since angular-flex-layout library is deprecated. By using this library you can able to achieve responsive layout with minor changes in your code.

Versions

| Angular | ri-flex-layout | |------------------| :---------: | | >=16.0.0 <17.0.0 | v1.2.x | | >=14.2.0 | v1.1.1 | | >=12.0.0 | v1.1.0 |

Getting Started

Start by installing the RI Flex library from npm

ng add @angular/cdk

npm i ri-flex-layout

Next, you'll need to import the RI Flex module in your app's module.

app.module.ts

import { RiFlexLayoutModule } from 'ri-flex-layout';
...

@NgModule({
    ...
    imports: [ RiFlexLayoutModule ],
    ...
});

After that is configured, you can use the Angular Layout attributes in your HTML tags for flex layout:

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

Example Column layout code

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

Responsive

<div riFxLayout="row wrap" riFxLayout.xs="column" riFxLayoutAlign="space-between" riFxLayoutGap="10px" riFxLayoutGap.xs="10px">
      <div riFxFlex="33" riFxFlex.xs="100">Sample Div1</div>
      <div riFxFlex="33" riFxFlex.xs="100">Sample Div2</div>
      <div riFxFlex="33" riFxFlex.xs="100">Sample Div3</div>
</div>

License

MIT