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 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.