{"id":20731097,"url":"https://github.com/greg-md/ng-flex-css-layout","last_synced_at":"2026-05-05T01:32:06.399Z","repository":{"id":57114269,"uuid":"121217237","full_name":"greg-md/ng-flex-css-layout","owner":"greg-md","description":"Flex-CSS-Layout is an alternative behaviour of Flex-Layout directives, that will still work with Angular Universal and App Shell.","archived":false,"fork":false,"pushed_at":"2018-06-11T13:50:24.000Z","size":165,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-08T09:51:17.624Z","etag":null,"topics":["angular","flex-css-layout","flex-layout","greg-js","greg-md","javascript","js","ng","ng-flex-css-layout","responsive","ts","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greg-md.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-12T07:59:57.000Z","updated_at":"2018-06-11T13:50:26.000Z","dependencies_parsed_at":"2022-08-22T10:11:18.312Z","dependency_job_id":null,"html_url":"https://github.com/greg-md/ng-flex-css-layout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-flex-css-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-flex-css-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-flex-css-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-flex-css-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greg-md","download_url":"https://codeload.github.com/greg-md/ng-flex-css-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243012751,"owners_count":20221616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","flex-css-layout","flex-layout","greg-js","greg-md","javascript","js","ng","ng-flex-css-layout","responsive","ts","typescript"],"created_at":"2024-11-17T05:13:40.988Z","updated_at":"2025-12-25T01:13:10.559Z","avatar_url":"https://github.com/greg-md.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Flex-CSS-Layout\n\n[![npm version](https://badge.fury.io/js/%40greg-md%2Fng-flex-css-layout.svg)](https://badge.fury.io/js/%40greg-md%2Fng-flex-css-layout)\n[![Build Status](https://travis-ci.org/greg-md/ng-flex-css-layout.svg?branch=master)](https://travis-ci.org/greg-md/ng-flex-css-layout)\n\n**Flex-CSS-Layout** is an alternative behaviour of [Flex-Layout](https://github.com/angular/flex-layout) directives,\nthat will still work with Angular Universal and App Shell.\nIt is not meant to replace Flex-Layout. You can freely use both modules on your needs.\n\nThe Flex-CSS-Layout engine intelligently generates internal style sheets(inside of `\u003cstyle\u003e` tags) rather than inline styles\nand leaves the CSS Media queries to be responsible of the layout.\n\n# Table of Contents:\n\n* [Installation](#installation)\n* [How It Works](#how-it-works)\n* [Breakpoints Priorities](#breakpoints-priorities)\n* [License](#license)\n* [Huuuge Quote](#huuuge-quote)\n\n# Installation\n\nTo install this library, run:\n\n```bash\n$ npm install @greg-md/ng-flex-css-layout --save\n```\n\n# How It Works\n\nPlease read [Flex-Layout wiki](https://github.com/angular/flex-layout/wiki) first.\n\nTo take advantage of Flex-CSS-Layout features, you will have to change the prefix of Flex-Layout directives\nfrom `fx` to `fc`(which is **F**lex**C**ss).\n\nFlex-CSS-Layout currently supported directives(including [Responsive API](https://github.com/angular/flex-layout/wiki/Responsive-API)):\n\n| Flex-Layout  | Flex-CSS-Layout |\n| ------------- | ------------- |\n| fxLayout | fcLayout |\n| fxLayoutAlign | fcLayoutAlign |\n| fxLayoutGap | fcLayoutGap |\n| fxFlex | fcFlex |\n| fxFlexOrder | fcFlexOrder |\n| fxFlexOffset | fcFlexOffset |\n| fxFlexAlign | fcFlexAlign |\n| fxFlexFill | fcFlexFill |\n| fxShow | fcShow + fcDisplayDefault |\n| fxHide | fcHide + fcDisplayDefault |\n\n\u003e **Note**: In some specific cases `fc*` directives may have different results than `fx*` directives. See [Breakpoints Priorities](#breakpoints-priorities).\n\n\u003e A new attribute `fcDisplayDefault` was provided for `fcShow` and `fcHide` directives,\n  that will apply when no `display` style could be found for the element. Useful for SSR.\n\n## Setting up in a module\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\n// 1. Import FlexCssModule;\nimport { FlexCssModule } from '@greg-md/ng-flex-css-layout';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    // 2. Register FlexCssModule providers in root module;\n    FlexCssModule.forRoot(),\n\n    // 3. Import FlexCssModule directives to specific modules.\n    FlexCssModule,\n  ],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Using in views\n\n```angular2html\n\u003cdiv fcLayout=\"column\"\u003e\n  \u003cdiv fcFlex=\"33\"\u003eOne\u003c/div\u003e\n\n  \u003cdiv fcFlex=\"33%\" [fcLayout]=\"direction\"\u003e\n    \u003cdiv fcFlex=\"22%\"\u003eTwo One\u003c/div\u003e\n    \u003cdiv fcFlex=\"205px\"\u003eTwo Two\u003c/div\u003e\n    \u003cdiv fcFlex=\"30\"\u003eTwo Three\u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv fcFlex\u003eThree\u003c/div\u003e\n\u003c/div\u003e\n```\n\n# Breakpoints Priorities\n\nBy default, breakpoints with smaller range and that applies on smaller screens have higher priority. See the next schema:\n\n![Breakpoints Priorities](Breakpoints%20Priorities.jpg)\n\nHow this looks in the code:\n\n```typescript\nexport const FLEX_CSS_DEFAULT_BREAKPOINTS: Breakpoint[] = [\n  { alias: 'gt-xs', media: ['screen', '(min-width: 600px)'] },\n  { alias: 'lt-xl', media: ['screen', '(max-width: 1919px)'] },\n  { alias: 'gt-sm', media: ['screen', '(min-width: 960px)'] },\n  { alias: 'lt-lg', media: ['screen', '(max-width: 1279px)'] },\n  { alias: 'gt-md', media: ['screen', '(min-width: 1280px)'] },\n  { alias: 'lt-md', media: ['screen', '(max-width: 959px)'] },\n  { alias: 'gt-lg', media: ['screen', '(min-width: 1920px)'] },\n  { alias: 'lt-sm', media: ['screen', '(max-width: 599px)'] },\n  { alias: 'xl',    media: ['screen', '(min-width: 1920px)', '(max-width: 5000px)'] },\n  { alias: 'lg',    media: ['screen', '(min-width: 1280px)', '(max-width: 1919px)'] },\n  { alias: 'md',    media: ['screen', '(min-width: 960px)', '(max-width: 1279px)'] },\n  { alias: 'sm',    media: ['screen', '(min-width: 600px)', '(max-width: 959px)'] },\n  { alias: 'xs',    media: ['screen', '(max-width: 599px)'] },\n];\n```\n\nIf you want to reverse the priority, or change it as you want, you can redefine it in the module instantiation:\n\n```typescript\n// Define new breakpoints directly.\nFlexCssModule.forRoot([].concat(FLEX_CSS_DEFAULT_BREAKPOINTS).reverse());\n// Or, provide a callable.\nFlexCssModule.forRoot(breakpoints =\u003e [].concat(breakpoints).reverse());\n```\n\n# License\n\nMIT © [Grigorii Duca](http://greg.md)\n\n# Huuuge Quote\n\n![I fear not the man who has practiced 10,000 programming languages once, but I fear the man who has practiced one programming language 10,000 times. #horrorsquad](http://greg.md/huuuge-quote-fb.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreg-md%2Fng-flex-css-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreg-md%2Fng-flex-css-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreg-md%2Fng-flex-css-layout/lists"}