git404hub

what is flex-layout fr?

angular/flex-layout — explained in plain English

Analysis updated 2026-06-26

5,845TypeScriptAudience · developerComplexity · 2/5Setup · easy

tl;dr

Angular Flex-Layout was a library for building responsive layouts in Angular apps using HTML attributes instead of CSS, it is now officially retired and the Angular team recommends modern alternatives.

vibe map

mindmap
  root((flex-layout))
    What it was
      Angular responsive layouts
      HTML attribute based
      No CSS needed
    Status
      Officially retired
      No new releases
    Alternatives
      Modern CSS Flexbox
      Angular built-in tools
      See official blog post
    Migration
      Code still available
      Wiki docs accessible

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Maintain an existing Angular project that still uses Flex-Layout without breaking it while you plan a migration.

VIBE 2

Understand how Flex-Layout's responsive attributes worked so you can rewrite them to CSS Flexbox or Tailwind.

VIBE 3

Reference the Flex-Layout wiki docs to map old fxLayout attributes to their equivalent CSS media query patterns.

what's the stack?

TypeScriptAngular

how it stacks up fr

angular/flex-layoutvanilagy/mediabunnyisaacs/rimraf
Stars5,8455,8425,841
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasyeasy
Complexity2/52/51/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 30min

This library is retired, for new projects use the alternatives recommended by the Angular team instead of installing this.

License not explicitly stated in the explanation.

in plain english

Angular Flex-Layout was a library that made it easier to control how elements are arranged on a page in Angular applications. Angular is a framework for building web apps, and arranging elements in rows, columns, and responsive grids normally requires writing CSS. This library let developers do that using simple HTML attributes instead, without writing CSS directly. The key feature was responsive layout: you could specify that an element should take up the full width on a phone but only half the width on a desktop, all by adding attributes to your HTML tags. The library used a browser technology called Flexbox under the hood and handled the CSS generation automatically. The Angular team has officially stopped publishing new releases of this project. The README notes this clearly at the top and points to a blog post explaining the decision and recommending alternatives. Modern CSS and Angular itself now provide better built-in options for responsive layouts, which is why the project was retired. For developers who already use this library in existing projects, the code remains available and the wiki documentation is still accessible. But for new projects, the Angular team recommends looking at the alternatives described in their blog post. Installation was straightforward: one npm command, then importing the module into your app.

prompts (copy fr)

prompt 1
I have an Angular app using Angular Flex-Layout that I need to migrate away from. Show me how to convert fxLayout and fxFlex attributes to equivalent CSS Flexbox properties.
prompt 2
Help me migrate an Angular Flex-Layout responsive grid to Tailwind CSS classes, preserving the same breakpoint behavior.
prompt 3
What does Angular recommend as alternatives to Flex-Layout for responsive layouts in a new Angular 17+ project?
prompt 4
I have Angular Flex-Layout attributes like fxLayout.xs and fxHide.gt-sm in my templates. Explain what they do and write the equivalent plain CSS media queries.

Frequently asked questions

what is flex-layout fr?

Angular Flex-Layout was a library for building responsive layouts in Angular apps using HTML attributes instead of CSS, it is now officially retired and the Angular team recommends modern alternatives.

What language is flex-layout written in?

Mainly TypeScript. The stack also includes TypeScript, Angular.

What license does flex-layout use?

License not explicitly stated in the explanation.

How hard is flex-layout to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is flex-layout for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.