<commit_before># Flex Layout

[![npm version](https://badge.fury.io/js/%40angular%2Fflex-layout.svg)](https://www.npmjs.com/package/%40angular%2Fflex-layout)
[![Build Status](https://travis-ci.org/angular/flex-layout.svg?branch=master)](https://travis-ci.org/angular/flex-layout)
[![Gitter](https://badges.gitter.im/angular/flex-layout.svg)](https://gitter.im/angular/flex-layout?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

Angular Flex Layout provides a sophisticated layout API using FlexBox CSS + mediaQuery. This module provides Angular (v2.x and higher) developers with component layout features using a custom Layout API, mediaQuery observables,and injected DOM flexbox-2016 css stylings.  

The 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 Flexbox CSS. 

---

The sources for this package are in the [Flex-Layout](https://github.com/angular/flex-layout) repository. <br/>
Please file issues and pull requests against that repo.

License: MIT

---

### IMPORTANT API CHANGE

Directive selectors are now camelCase (instead of dash-case); as specified in the Angular Style Guide (Q4, 2016):<commit_msg>update(readme): npm readme now shows quick install instructions<commit_after># Flex Layout

[![npm version](https://badge.fury.io/js/%40angular%2Fflex-layout.svg)](https://www.npmjs.com/package/%40angular%2Fflex-layout)
[![Build Status](https://travis-ci.org/angular/flex-layout.svg?branch=master)](https://travis-ci.org/angular/flex-layout)
[![Gitter](https://badges.gitter.im/angular/flex-layout.svg)](https://gitter.im/angular/flex-layout?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

Angular Flex Layout provides a sophisticated layout API using FlexBox CSS + mediaQuery. This module provides Angular (v2.x and higher) developers with component layout features using a custom Layout API, mediaQuery observables,and injected DOM flexbox-2016 css stylings.  

The 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 Flexbox CSS. 

---

The sources for this package are in the [Flex-Layout](https://github.com/angular/flex-layout) repository. <br/>
Please file issues and pull requests against that repo.

License: MIT


---

### Installation

The latest release of Angular Flex-Layout can be installed from npm

`npm install @angular/flex-layout`

Playing with the latest changes from [master](https://github.com/angular/flex-layout/tree/master) is also possible

`npm install https://github.com/angular/flex-layout-builds.git`

### IMPORTANT API CHANGE

Directive selectors are now camelCase (instead of dash-case); as specified in the Angular Style Guide (Q4, 2016):
{'fraction_non_alphanumeric': 0.10694121554300896, 'fraction_numerical': 0.010627698439056792, 'mean_word_length': 5.3544303797468356, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 16, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7139213', 'n_tokens_mistral': 907, 'n_tokens_neox': 834, 'n_words': 278}