Open-source library

ngx-layout

The community successor to Angular's Flex-Layout

@ngbracket/ngx-layout is a declarative layout engine for Angular. It lets you build responsive, Flexbox- and CSS Grid-based UIs directly from your templates using a small set of HTML attributes — no hand-written media queries required.

It is the maintained continuation of the original @angular/flex-layout, which the Angular team deprecated and archived. I maintain ngx-layout under the @ngbracket organisation so the many production apps that depended on Flex-Layout have a supported path forward, and I keep it current with each new Angular release.

Why it exists

When @angular/flex-layout was retired, a large number of applications were left on an unmaintained dependency. ngx-layout picks up where it left off: same familiar API, ongoing bug fixes, and compatibility with modern Angular (including the latest, Angular 22).

What it does

Declarative layout — express Flexbox layouts with attributes like fxLayout, fxFlex, fxLayoutGap and fxLayoutAlign instead of bespoke CSS.
Responsive APIs — adapt any of those attributes per breakpoint, e.g. fxLayout.xs="column", with a configurable, observable breakpoint system.
Static & responsive engines — use the static API for simple cases and the responsive API where you need breakpoint-aware behaviour.
Works great with Angular Material and the Angular CDK.

Getting started

Install the library alongside the Angular CDK:

npm i @ngbracket/ngx-layout @angular/cdk

Then import the layout module where you need it:

import { FlexLayoutModule } from '@ngbracket/ngx-layout';

@NgModule({
  imports: [FlexLayoutModule],
})
export class AppModule {}

And lay out your template declaratively:

<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px">
  <div fxFlex="30">Sidebar</div>
  <div fxFlex>Content</div>
</div>

ngx-layout

Why it exists

What it does

Getting started

Links