open-index/open-npm huggingface dataset:
npm package: @mrclark/recyclables
Description: This library currently only contains an angular `directive` for adding `flexbox` properties that are configurable at runtime.
Latest version: 0.0.5

# Recyclables
This library currently only contains an angular `directive` for adding `flexbox` properties that are configurable at runtime.


This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.5.

## Getting Started

Run `npm install @mrclark/recyclables -g` to install the library globally. In your `@NgModule` decorator import the FlexibleDirective.
On any element add the attribute `recFlexible` which will give default `flex-box` functionality and brings with it 3 other properties `recDirection`, `recJustify`, and `recAlign`.

> Note: Simply adding recFlexible to an element is equivalent to writing:
>`display: flex;
> justify-content: flex-start;
> align-items: start;` 


>Important Note: The Recyclable FlexibleDirection adds the style properties inline, so changing these properties in the css file would require use defining the change !important

> Recyclable is tree shakable!


## Usage
Add attribute to element
* `<div recFlexible> centent </div>`

Configure the direction, justification and alignment
* `<div recFlexible recDirection='column' recJustify='center' recAlign='center'> centent </div>`


## Additionally

MDN Web Docs has extensive documentation on the flex-box layout model. To understand how it works refer to the documentation.