# ng2-flex
> Flexbox Layout System for Angular 2
Latest version **1.0.0-alpha.12** (published 2018-01-31) · MIT license · 0 weekly downloads
## Install
```sh
npm install ng2-flex
pnpm add ng2-flex
yarn add ng2-flex
bun add ng2-flex
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0-alpha.12 |
| Published | 2018-01-31 |
| First published | 2016-11-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | santoro_mariano |
## Links
- npm: https://www.npmjs.com/package/ng2-flex
- Repository: https://github.com/santoro-mariano/ng2-flex
- Issues: https://github.com/santoro-mariano/ng2-flex/issues
- npm.io page: https://npm.io/package/ng2-flex
## Recent versions
- 1.0.0-alpha.12 (latest) — 2018-01-31
- 1.0.0-alpha.1 (alpha.1) — 2016-11-19
- 0.5.1 (alpha) — 2016-11-15
- 1.0.0-alpha.11 — 2018-01-31
- 1.0.0-alpha.10 — 2018-01-29
- 1.0.0-alpha.9 — 2018-01-29
- 1.0.0-alpha.8 — 2016-12-01
- 1.0.0-alpha.7 — 2016-11-29
- 1.0.0-alpha.6 — 2016-11-26
- 1.0.0-alpha.5 — 2016-11-26
- 1.0.0-alpha.4 — 2016-11-26
- 1.0.0-alpha.3 — 2016-11-25
- 1.0.0-alpha.2 — 2016-11-20
- 0.5.4 — 2016-11-15
- 0.5.3 — 2016-11-15
- … 1 more at https://npm.io/package/ng2-flex/versions
## README
# Flexbox Layout Library for Angular 2
[](https://gitter.im/ng2-flex/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://badge.fury.io/js/ng2-flex)
This library was made with the intention to help software developers that wants a simple layout system out of the box for Angular 2. This library uses Flexbox, so the compatibility with old browsers is limited.
## Installation/Setup
### Install with NPM
Install with npm `npm install --save ng2-flex`
### Add Module as a Dependency to Your App
Import `FlexModule` and add it to the `imports` of your app's `AppModule`
```javascript
// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { FlexModule } from 'ng2-flex';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
FlexModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
## Usage
### Container
You need to specify the `flxContainer` as the first element in your html body.
Example:
```html
...
```
Example: DIV as container
```html
...
```
### Grid System
Grid system is compound of three components:
The `flx-grid` allows you to generate a Grid Layout System. Inside of this component we add rows using the `flx-row` component and, inside of those rows, we add the columns using the `flx-column` component.
Example:
```html
Header
Main Content
Side bar
Footer
```
Example (using HTML5 elements):
```html
Main Content
```
#### Properties of flx-row and flx-column
* size
* Type: `string|SizeMapping`
* Description: Size of the Row/Column in pixels or percentage of the parent. The size can be a string or a instance of [SizeMapping](http://) object.
* Example:
```html
```
* switchSize
* Type: `string`
* Description: Device size when the row shows inside elements as column and column shows inside elements as row.
* Available values:
* extraSmall
* small
* medium
* large
* Example:
```html
```
* separation
* Type: `string`
* Description: How inner elements distribute extra space in the main axis (Row: X Axis, Column: Y Axis).
* Available values:
* between
* all
* Example:
```html
```
* wrap
* Type: `string`
* Description:
* Available values:
* nowrap
* wrap
* wrapReverse
* Example:
```html
```
* wrapAlignment
* Type: `string`
* Description:
* Available values:
* start
* center
* end
* stretch
* all
* between
* Example:
```html
```
* horizontalAlignment
* Type: `string`
* Description:
* Available values:
* left
* center
* right
* Example:
```html
```
* verticalAlignment
* Type: `string`
* Description:
* Available values:
* top
* center
* bottom
* Example:
```html
```
* order
* Type: `number|SizeMapping`
* Description:
* Example:
```html
```
### Structural Directives
#### flxSize
It allow us to **load** an element in the DOM when the device size is the same than the specified in the directive. Is the same behavior that has `ngIf` directive but with a device size instead of a boolean value.
Example:
```html
```
#### flxMaxSize
It allow us to **load** an element in the DOM while the device size is less than or equal that the specified in the directive.
Example:
```html
```
#### flxMinSize
It allow us to **load** an element in the DOM while the device size is more than or equal that the specified in the directive.
Example:
```html
```
### Attribute Directives
#### flxClass
It allow us to set classes for different device sizes. Is the same behavior that has `ngClass` but we specify device sizes instead of boolean values.
We can add more than one size for the same class with the pipe `|` character as a separator.
Example:
```html
```
### Pipes
#### checkSize
* Input: `DeviceSize`
* Output: `boolean`
* Params: allowedSizes - `string`
* Description:
#### deviceSize
* Input: `string`
* Output: `DeviceSize`
* Params: N/A
* Description:
#### sizeMap
* Input: `object`
* Output: `SizeMapping`
* Params: N/A
* Description:
---
_Source: https://npm.io/package/ng2-flex · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._