/flex-layout

Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
  1. TypeScript 86.9%
  2. JavaScript 5.7%
  3. HTML 3.6%
  4. Shell 2.3%
  5. CSS 1.5%
TypeScript JavaScript HTML Shell CSS
Switch branches/tags
v5.0.0-beta.14 v5.0.0-beta.13 v2.0.0-beta.12 v2.0.0-beta.11 v2.0.0-beta.10 v2.0.0-beta.9 v2.0.0-beta.8 v2.0.0-beta.7 v2.0.0-beta.6 v2.0.0-beta.5 v2.0.0-beta.4 v2.0.0-beta.3 v2.0.0-beta.2 v2.0.0-beta.1 v1.0.0-alpha.12 6.0.0-beta.16 6.0.0-beta.15 5.0.0-beta.15 2.0.1-866e0a7 2.0.0-rc.1-f270078 2.0.0-rc.1-eb22fe5 2.0.0-rc.1-eb5cb9f 2.0.0-rc.1-c2463a5 2.0.0-rc.1-ba0d85d 2.0.0-rc.1-3743282 2.0.0-rc.1-044632e 2.0.0-rc.1-2340a19 2.0.0-rc.1-980d412 2.0.0-rc.1-053fa67 2.0.0-rc.1-7cad395 2.0.0-rc.1-5db01e7 2.0.0-beta.11-b8a652d 2.0.0-beta.11-b01c2d7 2.0.0-beta.10-dc23b6d 2.0.0-beta.10-4905443 2.0.0-beta.10-3505185 2.0.0-beta.10-351573a 2.0.0-beta.9-f978b94 2.0.0-beta.9-f19bff2 2.0.0-beta.9-ea26752 2.0.0-beta.9-e461d17 2.0.0-beta.9-e3b2035 2.0.0-beta.9-e3b7fde 2.0.0-beta.9-df46d7a 2.0.0-beta.9-cc12733 2.0.0-beta.9-c3c7151 2.0.0-beta.9-1267972 2.0.0-beta.9-28173c2 2.0.0-beta.9-9133b18 2.0.0-beta.9-5823f4a 2.0.0-beta.9-816d85a 2.0.0-beta.9-481c2d1 2.0.0-beta.9-354f54f 2.0.0-beta.9-301b563 2.0.0-beta.9-99eabfb 2.0.0-beta.9-99e7450 2.0.0-beta.9-66f3717 2.0.0-beta.9-52cfcbe 2.0.0-beta.9-37e5912 2.0.0-beta.9-9d53907 2.0.0-beta.9-8b8b595 2.0.0-beta.9-7dcd97b 2.0.0-beta.9-7a48c25 2.0.0-beta.9-6b457dc 2.0.0-beta.9-5f198a3 2.0.0-beta.9-0e7d2e0 2.0.0-beta.9-0da1f88 2.0.0-beta.8-ffcad3a 2.0.0-beta.8-f5558de 2.0.0-beta.8-f0473e9 2.0.0-beta.8-d171c33 2.0.0-beta.8-d6b45a6 2.0.0-beta.8-beb5ed0 2.0.0-beta.8-bc0c900 2.0.0-beta.8-bbc1ba9 2.0.0-beta.8-b068dd2 2.0.0-beta.8-aa03283 2.0.0-beta.8-a3f2a83 2.0.0-beta.8-3611003 2.0.0-beta.8-771f2c9 2.0.0-beta.8-695bf37 2.0.0-beta.8-635c4f5 2.0.0-beta.8-81b41e6 2.0.0-beta.8-052a4a9 2.0.0-beta.8-45cfd2e 2.0.0-beta.8-40defac 2.0.0-beta.8-37a0b85 2.0.0-beta.8-21c34f7 2.0.0-beta.8-9fb0877 2.0.0-beta.8-6b42a27 2.0.0-beta.8-5ebeb23 2.0.0-beta.8-3e1fcbd 2.0.0-beta.8-0f13b14 2.0.0-beta.8-00ac57a 2.0.0-beta.7-e58330d 2.0.0-beta.7-b48ab7c 2.0.0-beta.6-f721f40 2.0.0-beta.6-da97af4 2.0.0-beta.6-aabe96d 2.0.0-beta.5-d95cb09
Nothing to show
Find file
Clone or download

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Download ZIP

Launching GitHub Desktop...

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop...

If nothing happens, download GitHub Desktop and try again.

Launching Xcode...

If nothing happens, download Xcode and try again.

Launching Visual Studio...

If nothing happens, download the GitHub extension for Visual Studio and try again.

Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci build: add sample Circle CI config Mar 9, 2018
.github chore: introduce GitHub Issue and Pull Request templates Jun 7, 2018
docs feat(lib): add config options for flex basis and other tokens May 31, 2018
guides feat(lib): add config options for flex basis and other tokens May 31, 2018
scripts chore(version): update version number in package.json to 5.0.0-beta.14 Mar 29, 2018
src fix(fxFlex): do not eagerly listen to layout changes (#771) Jun 11, 2018
test feat(lib): add config options for flex basis and other tokens May 31, 2018
tools feat(lib): add config options for flex basis and other tokens May 31, 2018
.clang-format update(yarn, build, tests): prepare for testing Nov 4, 2016
.editorconfig chore(config): update development configs (#31) Dec 14, 2016
.gitignore build: remove apps package-locks from git Mar 19, 2018
.travis.yml build: add hello-world app to track minimal requirements Mar 19, 2018
CHANGELOG.md update(doc): add Beta.16 release information Jun 7, 2018
CODE_REVIEWS.md docs: cleanup the Wiki and add missing docs Jan 20, 2018
CODING_STANDARDS.md docs: change reference from RxJS "lettable" to "pipeable" Feb 1, 2018
CONTRIBUTING.md chore: add CONTRIBUTING guidelines Jan 15, 2018
LICENSE chore: bump year Jan 4, 2018
README.md update(doc): add install notes for Angular 6 May 14, 2018
build-config.js chore: bump deps to Angular and CDK v6 final May 11, 2018
firebase.json chore(build): update build to match ngM2 build processes (#342) Jul 27, 2017
gulpfile.js chore(build): update build to match ngM2 build processes (#342) Jul 27, 2017
package-lock.json fix(fxFlex): do not eagerly listen to layout changes (#771) Jun 11, 2018
package.json fix(fxFlex): do not eagerly listen to layout changes (#771) Jun 11, 2018
release chore(release): fetch tags before changelog generation Apr 13, 2018
stylelint-config.json chore(versions): update to Angular v5.2 and update peer dep requirements Jan 16, 2018
tsconfig.json feat(demo-app): use Angular CLI to build demo and universal apps Feb 20, 2018
tslint.json build: upgrade to Angular v6 and TypeScript v2.7 Mar 30, 2018

README.md

Angular Flex-Layout

npm version Build Status Gitter

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.

Angular 6

When upgrading your application to use Angular 6 and RxJS 6, you must install release 6.x of Flex Layout:

npm i --save @angular/flex-layout@6.0.0-beta.15

Quick Links

Developers

Demos

Browser Support

  caniuseflexbox


License

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

License: MIT