Flex Layout

Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Alternatives To Flex Layout
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Spectre11,118394934 months ago65July 02, 2020193mitCSS
Spectre.css - A Lightweight, Responsive and Modern CSS Framework
Flex Layout5,9175,089934a month ago41June 30, 202250mitTypeScript
Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Grid2,059134724 years ago10August 06, 2019mitJavaScript
This package has moved and renamed
Cirrus1,160333 days ago16April 01, 202221mitSCSS
:cloud: The SCSS framework for the modern web.
Formstone831103a month ago35October 01, 20216otherJavaScript
Library of modular front end components.
2 years ago1August 26, 2015mitCSS
A simple responsive CSS grid.
Waffle Grid603
13 years ago13September 29, 2019mitCSS
An easy to use flexbox grid system.
Responsive Grid Of Hexagons542
8 months ago3apache-2.0HTML
CSS responsive grid of hexagons
React Native Responsive Grid342
53 years ago229March 18, 20201otherJavaScript
Bringing the Web's Responsive Design to React Native
React Responsive Masonry1881815 months ago15November 18, 202113mitJavaScript
React responsive masonry component built with css flexbox
Alternatives To Flex Layout
Select To Compare

Alternative Project Comparisons

Angular Flex-Layout

npm version Build status Gitter

NOTE: The Angular team no longer publishes new releases of this project. Please review this blog post for alternatives, and this article for the explanation and next steps.

Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. This module provides Angular developers with component layout features using a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.

The Flex Layout engine intelligently automates the process of applying appropriate Flexbox CSS to browser view hierarchies. This automation also addresses many of the complexities and workarounds encountered with the traditional, manual, CSS-only application of box CSS.

The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.

Getting Started

Start by installing the Angular Layout library from npm

npm i -s @angular/flex-layout @angular/cdk

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


import { FlexLayoutModule } from '@angular/flex-layout';

    imports: [ FlexLayoutModule ],

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

<div fxLayout="row" fxLayoutAlign="space-between">

Check out all of the available options for using Angular Layout in your application.

Quick Links


StackBlitz Templates


Browser Support



The sources for this package are in the Flex Layout repository.
Please file issues and pull requests against that repo.

License: MIT

Popular Responsive Projects
Popular Flexbox Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Flexbox Css
Flex Layout